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();//显示窗体
}
);
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），并包含相关链接。 |