ExtJS学习------Ext.window属性详解
Ext.window用于创建window窗口，从外观上看和MessageBox相似，因为Ext.MessageBox内部也是基于Ext.Window实现的。以下就是实现Ext.Window创建和一些基本属性
el:用于设置存放Ext.window窗口的层。设置值为div的id值，需要在之间创建的节点。
layout:设置内部控件显示样式，选项有："fit“和"border“，其中fit只能显示一个子控件，且该子控件将填充整个window窗口，border可以显示多个子控件，常用于设置各个控件的布局。
width:设置窗口宽度。
height:设置窗口高度。
closeAction：用于设置点击右上角关闭按钮时所执行的命令，选项有"hide"和"close“，其中hide表示关闭窗口时执行隐藏命令，该窗口对象不被销毁，可以通过show()函数将其显示出来；close表示关闭窗口，该值为默认值，当执行close命令时，表时将窗口对象销毁，不能通过show()函数表示，只能进行重新创建。
items:[{控件1},{控件2}...]，表示向窗口中添加控件，
buttons:[{按钮1},{按钮2}...]，用于在窗口底端创建按钮，按钮创建方法：[{text:"按钮名称",handle:function(){ }}]，其中handle表示当按下按钮时所执行的操作。同时也可以用于Ext.Panel中。
buttonAlign:left/center/right，表示buttons创建的按键显示的位置，分别表示左对齐，居中对齐，右对齐，默认为右对齐。
bbar:[{按钮1},{按钮2}...]，用于创建底部工具按钮，用法和buttons一样。同时也可以用于Ext.Panel中
tbar:[{按钮1},{按钮2}...]，用于创建底部工具按钮，用法同上。同时也可以用于Ext.Panel中
tools:[{按钮1},{按钮2}...]，用于在窗口标题栏上创建按钮，创建方法[{id:"save",handler:function(){ },{id:"print",handler:function(){ },...}]，其中id选项有save，print，help，close,minimize,maximize,restore,gear,pin,unpin,right,left,up,down,refresh,minus,plus,search。具体读者可以自行试。同时也可以用于Ext.Panel中。
maximizable:true/false，表示窗口右上角是否出现表示最大化按钮，当点击最大化按钮时，窗口将自动扩展以充满整个浏览器窗口，且最大化按钮将变成恢复原来大小的按键。该过程不需要自行设计相关函数。
minimizable:true/false，表示窗口右上角是否出现表示最小化按钮，与最大化不一样的地方就是Ext没有预设最小化函数，需自行定义。
constrain:true/false,表示用于限制窗口在移动时不得超出浏览器边界。
constrainHeader:true/false，表示用于限制窗口标题栏在移动时不得超出浏览器边界。
resizable:true/false，表示是否可以改变窗口大小。
modal：true/false，表示弹出窗口后，父窗口能否有效。
实例一:layout 属性fit和border运用，代码如下：
var pan = new Ext.Panel({
title: "导航",
split: true,
width: 200,
collapsible: true,
region: "west",
});
var tabs = new Ext.TabPanel({
"region": "center",
activeTab: 0,
items: [{
title: "T1",
html: "c1"
}, {
title: "T2",
html: "C2",
closable: true,
}
],
});
var win = new Ext.Window({
title: "创建窗口事例",
width: 600,
height: 350,
closable: true,
draggable: true,
closeAction: "hide",
maximizable: true,
minimizable: true,
layout: "border",
collapsible: true,
tools: [{
id: "save", handler: function () {
Ext.Msg.alert("提示","save...")
}}],
constrainHeader: true,
constrain: true,
plain:true,
items: [pan, tabs],
tbar: [{ text: "按钮1" ,handler:function(){Ext.Msg.alert("提示","Try.......");}}, { text: "按钮2" }],
bbar: [{ text: "按钮1" }, { text: "按钮2" }],
buttons: [{
text: "关闭", handler: function () {
win.close();
}
}],
});
win.show();
运行结果如下：
layout:"border" layout:"fit"
实例二:constrain和constrainHeader区别代码如下：
var pan = new Ext.Panel({
title: "导航",
split: true,
width: 200,
collapsible: true,
region: "west",
});
var tabs = new Ext.TabPanel({
"region": "center",
activeTab: 0,
items: [{
title: "T1",
html: "c1"
}, {
title: "T2",
html: "C2",
closable: true,
}
],
});
var win = new Ext.Window({
title: "创建窗口事例",
width: 600,
height: 350,
closable: true,
draggable: true,
closeAction: "hide",
maximizable: true,
minimizable: true,
layout: "border",
collapsible: true,
tools: [{
id: "save", handler: function () {
Ext.Msg.alert("提示","save...")
}}],
constrainHeader: true,
// constrain: true,
plain:true,
items: [pan, tabs],
tbar: [{ text: "按钮1" ,handler:function(){Ext.Msg.alert("提示","Try.......");}}, { text: "按钮2" }],
bbar: [{ text: "按钮1" }, { text: "按钮2" }],
buttons: [{
text: "关闭", handler: function () {
win.close();
}
}],
});
win.show();
运行结果如下：
constrain设为true时 constrainHeader设为true时