Javascript - ExtJs - Window组件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript - ExtJs - Window组件相关的知识,希望对你有一定的参考价值。

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 {
    backgroundurl(../../Img/Ico/login.png);
    margin-left:78px;
}
View Code

 

Javascript - 学习总目录

以上是关于Javascript - ExtJs - Window组件的主要内容,如果未能解决你的问题,请参考以下文章

ExtJS学习-----------Ext.String,ExtJS对javascript中的String的扩展

Javascript/ExtJS:Ext.getCmp('') 导致 TypeError ...不是函数

如何使用 javascript/Extjs 进行默认横向打印?

EXT JS

从 jQuery 或 vanilla javascript 事件触发合成 ExtJS 事件

Javascript - ExtJs - 类