ExtJS学习之window

Ext.onReady(function(){
    //ex003:用windowGroup对象去操作多个window窗口
    var wingroup = new Ext.WindowGroup();
    for(var i = 1 ; i <=4;i++){
        var win = Ext.create('Ext.Window',{
            title:'第' + i + '个窗口' , 
            id:'win_' + i ,
            constrain:true ,
            300 , 
            height:300 ,
            x:320*(i-1),
            y:100,
            //minimizable:true,
            maximizable:true,
            listeners:{
                "minimize":function(win, opts){
                    win.collapse();
                    //this.hide();
                },
                "close":function(win, opts){
                    alert('宽：'+win.getWidth()+' 高：'+win.getHeight());
                }
            },
            html:"<img id='img_win_"+i+"' src='extjs/img/20170327132943.png'/>",
            renderTo:Ext.getBody()
        });

        win.minimize = function(e){
            this.hide();
        };
        win.show();
        
        wingroup.register(win);        //把窗体对象注册给ZindexManger
    }
    for(var i = 5 ; i <=8;i++){
        var win = Ext.create('Ext.Window',{
            title:'第' + i + '个窗口' , 
            id:'win_' + i , 
            constrain:true ,
            300 , 
            height:300 ,
            x:320*(i-5),
            y:420,
            resizable:true, //是否可以改变窗口大小
            //minimizable:true, //窗口最小化
            maximizable:true, // 窗口最大化
            html:"<img id='img_win_"+i+"' src='extjs/img/u=3516058194,542182021&fm=23&gp=0.jpg' style='300px;height:300px;'/>",
            listeners:{
                "minimize":function(win, opts){
                    win.collapse();
                    //this.hide();
                }
            },
            renderTo:Ext.getBody()
        });
        
        win.show();
        
        wingroup.register(win);        //把窗体对象注册给ZindexManger
    }
    
    var btn1 = Ext.create('Ext.button.Button',{
        text:'全部隐藏' , 
        renderTo:Ext.getBody(),
        handler:function(){
            wingroup.hideAll();        //隐藏所有被管理起来的window组件
        }
    });
    
    var btn2 = new Ext.button.Button({
        text:'全部显示' , 
        renderTo:Ext.getBody(),
        handler:function(){
            wingroup.each(function(cmp){
                cmp.show();
            });
        }        
    });
    
    var btn3 = new Ext.button.Button({
        text:'把第三个窗口显示在最前端' , 
        renderTo:Ext.getBody(),
        handler:function(){
            wingroup.bringToFront('win_3'); //把当前的组件显示到最前端
        }        
    });    
    
    
    var btn4 = new Ext.button.Button({
        text:'把第五个窗口显示在最末端' , 
        renderTo:Ext.getBody(),
        handler:function(){
            wingroup.sendToBack('win_5');    //把当前的组件显示到最后
        }        
    });    
    
    var btn5 = new Ext.button.Button({
        text:'获取信息' , 
        renderTo:Ext.getBody(),
        handler:function(){
            wingroup.each(function(cmp){
                var id = '#'+cmp.getId();
                alert(cmp.getId()+' 宽：'+cmp.getWidth()+' 高：'+cmp.getHeight()+ ' left：'+$(id).position().left + 'px top：'+$(id).position().top+'px  html：'+cmp.body.dom.innerHTML);
            });
        }        
    });

    
    
});