Javascript - ExtJs - Window组件

Posted 2020-10-05

1.所有组件都可以放入window，此时子组件不需要配置renderTo，只需要将它们作为window的items子项即可。

2.items子项必须先创建，最后创建window，否则子项不会显示。

3.应在关闭window之前（beforeclose事件）销毁它 

Ext.create("Ext.window.Window", {
    id: "AuthorizationWin",
    title: "正在编辑……",
    autoShow: true,
    style: "border:none;padding:10px;",  //去除window组件dom元素的边框
    border: false, // 去除window组件的边框
    modal: true,  //添加遮罩
    layout: "anchor",
    width: 600,
    height: 450,
    items: [
            Ext.getCmp("gridPanel")
    ],
    listeners: {
        beforeclose: function () { //关闭前销毁window，不能在close时销毁，否则遮罩没法清除
            this.destroy();
        },
        close: function () { }
    }
});

登录框

Ext.onReady(function () {
    //创建表单
    Ext.create("Ext.form.Panel", {
        id: "formLogin",
        border: false, // 去除panel组件的边框
        defaultType: "textfield",
        defaults:{style:"margin-top:10px;"},
        layout: {
            type: \'vbox\',
            align: \'center\'
        },
        items: [
                {
                    height: 30,
                    emptyText:"用    户",
                    fieldStyle: { background: \'#ffffff url(/Img/Ico/user.png) no-repeat 8px center\', paddingLeft: \'33px\' }
                },
                {
                    height: 30,
                    emptyText: "密    码",
                    fieldStyle: { background: \'#ffffff url(/Img/Ico/block.png) no-repeat 8px center\', paddingLeft: \'33px\' }
                },
                {
                    xtype:"button",
                    style: "border:none;background:#16699E;margin-top:10px;",
                    iconCls:"btnIco",
                    width: 210,
                    height:30,
                    frame:false,
                    border: false,
                    text:"登  入"
                }
        ]            
    });

    Ext.create("Ext.window.Window", {
        title: "Drugs ERP Login",
        bodyPadding: 10,
        autoShow: true,
        style: "border:none;padding:10px;",  //去除window组件dom元素的边框
        border: false, // 去除window组件的边框       
        closable: false,
        draggable:false,
        layout: "anchor",
        width: 310,
        height:300,
        items: [
                Ext.getCmp("formLogin")
        ],
        listeners: {
            beforeclose: function () { //关闭前销毁window，不能在close时销毁，否则遮罩没法清除
                this.destroy();
            },
            close: function () { }
        }
    });
});

View Code

/*按钮内图标*/
.btnIco {
    background: url(../../Img/Ico/login.png);
    margin-left:78px;
}

View Code

 

Javascript - 学习总目录