用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',

 

完。