ExtJS3.0之窗口Ext.Window

3、Ext.Window

　　下面结合一个例子来讲解Ext.Window，上一节最后一个Ext.Panel完整登陆实例稍作改造，代码如下：

 /// 
Ext.onReady(function(){
    var _window = new Ext.Window({
            title:"窗口",
            layout:'form',
            width:260,
            height:130,
            labelWidth:45,
            resizable:false, //resizable：是否可以改变窗口大小
            minimizable:true,
            closeAction:'hide',
            constrain:false,
            plain: true, //plain：渲染窗口的背景颜色
            defaults:{xtype:"textfield",width:180},
            bodyStyle:"padding:3px",//bodyStyle：设置当前主窗口的样式
            buttonAlign:"center",
            
            listeners:{
                "minimize":function(){
                        Ext.Msg.alert("提示","最小化");
                    },
                "beforehide":function(){
                        return false;
                    },
                "show":function(){
                        Ext.Msg.alert("提示","你好！我来也。");
                    },
                "hide":function(){
                        Ext.Msg.alert("提示","再见！");
                    },
                "close":function(){
                        Ext.Msg.alert("提示","窗口关闭！");
                    }
            },
            items:[{             //items：指定包含在面板中的组件的配置数组
                    fieldLabel:"账 号"
                },{
                    fieldLabel:"密 码"
            }],
            buttons:[{          //buttons：定包含在面板中的按钮的配置数组
                    text:"确 定"
                },{
                    text:"取 消",
                    handler:function(){
                        _window.hide();
                    }
            }]
        });
    _window.show();
});
 

　　执行上述代码，如下图所示：

    小结：

a)、构造函数参数
-title:窗口的标题
-minimizable:是否显示最小化按钮
-maximizable:是否显示最大化按钮
b)、方法
-show:显示窗口
-hide:隐藏窗口
c)、事件
-show:显示时触发
-hide:隐藏时触发
-close:关闭时触发