今天给大家分享Window组件，由于前几天公司在做项目，时间有点紧！所以一直到现在才分享！好的！还是直接进入正题！
还是老样子先举个简单的例子，
/html代码
<div id="win" class="x-hidden">
</div>
//js代码
var w=new Ext.Window({
contentEl:"win",//主体显示的html元素，也可以写为el:"win"
300,
height:200,
title:"青苹果"
});
w.show();
如图：
参数介绍：
因为前面已经介绍了panel组件，下面只介绍window组件的几个其他特别的配置参数
//几个前面没有介绍的window自己的配置参数
1.closeAction:枚举值为：close(默认值)，当点击关闭后，关闭window窗口
hide,关闭后，只是hidden窗口
2.closable:true在右上角显示小叉的关闭按钮，默认为true
3.constrain：true则强制此window控制在viewport，默认为false
4.modal:true为模式窗口，后面的内容都不能操作，默认为false
5.plain：//true则主体背景透明，false则主体有小差别的背景色，默认为false
//需要显示下show（）方法,默认的窗口是可拖动的，可关闭的，可拖动大小的
w.show（）
1.嵌套了tabpanel的window
实例：
var w=new Ext.Window({
contentEl:"win",
300,
height:200,
items:new Ext.TabPanel({
activeTab:0,//当前标签为第1个tab（从0开始索引）
border:false,
items:[{title:"tab1",html:"tab1在windows窗口中"},{title:"tab2",html:"tab2在windows窗口
中"}]//TabPanel中的标签页，以后再深入讨论
}),
plain:true,//true则主体背景透明，false则主体有小差别的背景色，默认为false
title:"青苹果"
});
w.show();
效果图：
我们通过items把TabPanel组件嵌套在window的主体中去了。
我们在添加工具栏看看
// bbar:[{text:"确定"},{text:"取消",handler:function(){w.close();}}],//bottom部
buttons:[{text:"确定"},{text:"取消",handler:function(){w.close();}}],//footer部
buttonAlign:"center",//footer部按钮排列位置,这里是中间
// collapsible:true,//右上角的收缩按钮
实例：
var w=new Ext.Window({
contentEl:"win",
300,
height:200,
buttons:[{text:"确定"},{text:"取消",handler:function(){w.close();}}],//footer部
buttonAlign:"center",//footer部按钮排列位置,这里是中间
items:new Ext.TabPanel({
activeTab:0,//当前标签为第1个tab（从0开始索引）
border:false,
items:[{title:"tab1",html:"tab1在windows窗口中"},{title:"tab2",html:"tab2在windows窗口
中"}]//TabPanel中的标签页，以后再深入讨论
}),
plain:true,//true则主体背景透明，false则主体有小差别的背景色，默认为false
title:"青苹果"
});
w.show();
效果图：
其他工具栏方法一样。
今天的内容比较少！希望大家谅解！不过还是希望能够给学习ExtJS的爱好者一些帮助！如果大家能从中学到一点点东西！那我的努力就没有白费！
最后和大家分享一句哲理“千里冰山非一日之寒”！呵呵！原话可能不是这么说的！大概意思应该就是这样！ 我想这句话的意思“你懂的”！
|
|
作者：青苹果 座右铭：不断的反省自己！然后加以改变！ 感兴趣的技术：.NET、数据库、JavaScript、C#、ajax、winform、jquery、extjs 本文出处：http://www.cnblogs.com/xinchun/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 |
