今天将介绍window组件,它继承自panel。
先介绍个最简单例子
 //html代码
//html代码
 <div id="win" class="x-hidden">
<div id="win" class="x-hidden">
 </div>
        </div> //js代码
//js代码

 var w=new Ext.Window(
var w=new Ext.Window( {
{
 contentEl:"win",//主体显示的html元素,也可以写为el:"win"
           contentEl:"win",//主体显示的html元素,也可以写为el:"win"
 width:300,
           width:300,
 height:200,
           height:200,
 title:"标题"
           title:"标题" 
 });
        });
 w.show();
        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
实例介绍:
1.嵌套了tabpanel的window

 var w=new Ext.Window(
var w=new Ext.Window( {
{
 contentEl:"win",
           contentEl:"win",
 width:300,
           width:300,
 height:200,
           height:200,

 items:new Ext.TabPanel(
           items:new Ext.TabPanel( {
{
 activeTab:0,//当前标签为第1个tab(从0开始索引)
                      activeTab:0,//当前标签为第1个tab(从0开始索引)
 border:false,
                      border:false,

 items:[
                      items:[ {title:"tab1",html:"tab1在windows窗口中"},
{title:"tab1",html:"tab1在windows窗口中"}, {title:"tab2",html:"tab2在windows窗口中"}]//TabPanel中的标签页,以后再深入讨论
{title:"tab2",html:"tab2在windows窗口中"}]//TabPanel中的标签页,以后再深入讨论
 }),
                 }),
 plain:true,//true则主体背景透明,false则主体有小差别的背景色,默认为false
           plain:true,//true则主体背景透明,false则主体有小差别的背景色,默认为false
 title:"标题"
           title:"标题"
 });
        });
 w.show();
        w.show();
我们通过items把TabPanel组件嵌套在window的主体中去了。
我们在添加工具栏看看
 // bbar:[{text:"确定"},{text:"取消",handler:function(){w.close();}}],//bottom部
// bbar:[{text:"确定"},{text:"取消",handler:function(){w.close();}}],//bottom部

 buttons:[
   buttons:[ {text:"确定"},
{text:"确定"}, {text:"取消",handler:function()
{text:"取消",handler:function() {w.close();}}],//footer部
{w.close();}}],//footer部
 buttonAlign:"center",//footer部按钮排列位置,这里是中间
   buttonAlign:"center",//footer部按钮排列位置,这里是中间
 // collapsible:true,//右上角的收缩按钮
// collapsible:true,//右上角的收缩按钮