ExtJS之对话框及窗口篇

var win;
Ext.get( " btnWindow " ).on( " click " , function (){
if ( ! win){ // 如果不存在win对象择创建
win = new Ext.Window({
title: ' Ext窗口 ' ,
width: 400 ,
height: 300 ,
layout: ' fit ' , // 设置窗口内部布局
closeAction: ' hide ' ,
plain: true , // true则主体背景透明，false则和主体背景有些差别
collapsible: true , // 是否可收缩
modal: true , // 是否为模式窗体
items: new Ext.TabPanel({ // 窗体中中是一个一个TabPanel
autoTabs: true ,
activeTab: 0 ,
deferredRender: false ,
border: false ,
items:[
{
title: ' Tab1 ' ,
html: ' Tab1的内容 ' // 内部显示内容
},
{
title: ' Tab2 ' ,
html: ' Tab2的内容 '
}
]
}),
buttons:[
{
text: ' 提交 ' ,
disabled: true // 暂时设为不可用
},
{
text: ' 关闭 ' ,
handler: function (){ // 点击时触发的事件
win.hide();
}
}
]
});
}
win.show(); // 显示窗体
}

);

 

 

对于上面的代码基本上都有注释，我也不再做解释，对于TabPanel如果不理解没有关系，后面会专门提到。

运行效果：

 

 

注意上面的Ext.MessageBox也可以用Ext.Msg这个别名代替，其实上面我们已经用了。

本作品采用知识共享署名 2.5 中国大陆许可协议进行许可，欢迎转载，演绎或用于商业目的。但转载请注明来自崔江涛（KenshinCui），并包含相关链接。

本作品采用知识共享署名 2.5 中国大陆许可协议进行许可，欢迎转载，演绎或用于商业目的。但转载请注明来自崔江涛（KenshinCui），并包含相关链接。