用extjs6.0寫一個點擊新建窗口的功能

一、寫一個按鈕

　　注意id

    {
        id: 'ListEdit',
        text:'編輯',
        iconCls:'x-fa fa-edit'
    }

 

二、寫新建的頁面

　　下面我新建的是表單，有幾點需要注意的：

　　① 因為表單是多列的，所以layout用了column（自己試的，不一定是最好的寫法）；如果只有一列，layout用form。

　　② name可以忽略，combo只是有個樣子。

Ext.define('report.view.system.organization.ListEdit',{
    extend:'Ext.form.FormPanel',
    xtype:'ListEdit',

    layout:'column',
    defaults:{
        style:'float:left;margin:4px;',
        columnWidth: 0.48 },
　　//layout:'form',

    defaultType:'textfield',
    fieldDefaults:{
        labelAlign:'right',
        labelWidth:84                                 
    },

    items:[
        {
            fieldLabel: '上級編碼',
            xtype: 'combo',
            name: 'user',
            emptyText: '倉庫',
        },
        {
            fieldLabel: '狀態',
            xtype: 'combo',
            name: 'user',
            emptyText: '有效',
        },
        {
            fieldLabel: '組織架構編碼',
            name: 'user',
        },
        {
            fieldLabel: '組織架構名稱',
            name: 'user',
        },
        {
            fieldLabel: '聯系人',
            name: 'user',
        },
        {
            fieldLabel: '聯系方式',
            name: 'user',
        },
        {
            fieldLabel: '服務器IP',
            name: 'user',
        },
        {
            fieldLabel: '數據庫名',
            name: 'user',
        },
        {
            fieldLabel: '登錄名',
            name: 'user',
        },
        {
            fieldLabel: '密碼',
            name: 'user',
        },
        {
            fieldLabel: '地址',
            name: 'user',
            columnWidth: 0.96
        },
        {
            fieldLabel: '備注',
            name: 'user',
            columnWidth: 0.96
        }
    ]
})

 

三、寫controller

　　1、獲取頁面，並添加保存和關閉的按鈕

　　　　var editForm = new Ext.create('report.view.system.organization.ListEdit',{
            buttons:[
                {
                    text:'保存',
                },
                {
                    text:'關閉',
                    handler:function(){
                                EditWin.hide();
                            }
                }
            ]
        });

 

　　2、通過id獲取到編輯按鈕，並給它添加點擊事件

　　　　 var editBtn = Ext.ComponentManager.get('ListEdit');
        
        editBtn.on('click', ListEdit);

        function ListEdit() {
            editForm.form.reset();
            EditWin.show();
        }

 

　　3、設置新增窗口

　　　　var EditWin = new Ext.Window({
            title:'編輯組織架構',
            modal: true,//遮罩層
            width:480,
            closeAction:'hide',//若不寫這個，x只能點一次，然后就沒有然后了
            resizable: false,//默認是true
            plain: true,
            //buttonAlign: 'center',
            items: editForm
        })

 

　　*controller全部代碼

Ext.define('report.controller.system.organization.OrganizationController', {
    extend: 'Ext.app.ViewController',

    alias: 'controller.Organization',

    init:function(){
    // *********新建**********
        var editForm = new Ext.create('report.view.system.organization.ListEdit',{
            buttons:[
                {
                    text:'保存',
                },
                {
                    text:'關閉',
                    handler:function(){
                                EditWin.hide();
                            }
                }
            ]
        });
        //獲取到這個按鈕
        var editBtn = Ext.ComponentManager.get('ListEdit');
        //修改按鈕點擊事件
        editBtn.on('click', ListEdit);

        //添加按鈕單擊事件
        function ListEdit() {
            editForm.form.reset();
            EditWin.show();
        }
        //新增窗口
        var EditWin = new Ext.Window({
            title:'編輯組織架構',
            modal: true,//遮罩層
            width:480,
            closeAction:'hide',//若不寫這個，x只能點一次，然后就沒有然后了
            resizable: false,//默認是true
            plain: true,
            //buttonAlign: 'center',
            items: editForm
        })
    }
});

四、引用controller

最后在頁面引用controller

controller: 'Organization',

 

完。