ExtJS3.0之窗口

 ExtJS中窗口是由Ext.Window类定义，该类继承自Panel，因此窗口其实是一种特殊的面板Panel。窗口包含了浮动、可拖动、可关闭、最大化、最小化等特性。看下面的代码：

 /// 
 
Ext.onReady(function(){
    Ext.get("btn").on("click",newWin);
 });
 
var i=0;
function newWin() {
         var win=new Ext.Window({
            title:"窗口"+i++,
             width:400,             
             height:300,             
             maximizable:true
         });          
     win.show();
}
 

　　页面中的html内容：

　　执行上面的代码，当点击按钮“新窗口”的时候，会在页面中显示一个窗口，窗口标题为“窗口x”，窗口可以关闭，可以最大化，点击最大化按钮会最大化窗口，最大化的窗口可以还原。

 窗口是分组进行管理的，可以对一组窗口进行操作，默认情况下的窗口都在默认的组 Ext.WindowMgr中。窗口分组由类Ext.WindowGroup定义，该类包括bringToFront、getActive、 hideAll、sendToBack等方法用来对分组中的窗口进行操作。

　　看下面的代码：

 var i=0,mygroup; 
function newWin() {         
    var win=new Ext.Window({
        title:"窗口"+i++,            
        width:400,            
        height:300,            
        maximizable:true,            
        manager:mygroup
        });          
    win.show(); 
}
 
function toBack(){
    mygroup.sendToBack(mygroup.getActive());
}
 
function hideAll(){        
    mygroup.hideAll();
}
 
Ext.onReady(function(){
    mygroup=new Ext.WindowGroup();    
    Ext.get("btn").on("click",newWin);    
    Ext.get("btnToBack").on("click",toBack);    
    Ext.get("btnHide").on("click",hideAll);
});

　　页面中的html代码

　　执行上面的代码，先点击几次“新窗口”按钮，可以在页面中显示几个容器，然后拖动这些窗口，让他们在屏幕中不同的位置。然后点“放到后台”按钮，可以实现把最前面的窗口移动该组窗口的最后面去，点击“隐藏所有”按钮，可以隐藏当前打开的所有窗口。

　　实际应用的弹出窗口，需要传入html片段并显示到窗口中，窗口显示该内容。代码如下：

 Ext.onReady(function(){
    Ext.get("btn").on("click",function(){
        var html="
你好，志玲。
";    
        newWin(html);
    });    
});
 
function newWin(html) {         
    var win=new Ext.Window({
            title:"窗口",            
            width:400,            
            height:300,            
            maximizable:true,    
            loadMask:"正在加载......",
            modal:true
        }); 
        
    win.html=html;     
    win.show(); 
}