ExtJS学习之window 

  1 Ext.onReady(function(){
  2     //ex003:用windowGroup对象去操作多个window窗口
  3     var wingroup = new Ext.WindowGroup();
  4     for(var i = 1 ; i <=4;i++){
  5         var win = Ext.create('Ext.Window',{
  6             title:'第' + i + '个窗口' , 
  7             id:'win_' + i ,
  8             constrain:true ,
  9             width:300 , 
 10             height:300 ,
 11             x:320*(i-1),
 12             y:100,
 13             //minimizable:true,
 14             maximizable:true,
 15             listeners:{
 16                 "minimize":function(win, opts){
 17                     win.collapse();
 18                     //this.hide();
 19                 },
 20                 "close":function(win, opts){
 21                     alert('宽：'+win.getWidth()+' 高：'+win.getHeight());
 22                 }
 23             },
 24             html:"<img id='img_win_"+i+"' src='extjs/img/20170327132943.png'/>",
 25             renderTo:Ext.getBody()
 26         });
 27 
 28         win.minimize = function(e){
 29             this.hide();
 30         };
 31         win.show();
 32         
 33         wingroup.register(win);        //把窗体对象注册给ZindexManger
 34     }
 35     for(var i = 5 ; i <=8;i++){
 36         var win = Ext.create('Ext.Window',{
 37             title:'第' + i + '个窗口' , 
 38             id:'win_' + i , 
 39             constrain:true ,
 40             width:300 , 
 41             height:300 ,
 42             x:320*(i-5),
 43             y:420,
 44             resizable:true, //是否可以改变窗口大小
 45             //minimizable:true, //窗口最小化
 46             maximizable:true, // 窗口最大化
 47             html:"<img id='img_win_"+i+"' src='extjs/img/u=3516058194,542182021&fm=23&gp=0.jpg' style='width:300px;height:300px;'/>",
 48             listeners:{
 49                 "minimize":function(win, opts){
 50                     win.collapse();
 51                     //this.hide();
 52                 }
 53             },
 54             renderTo:Ext.getBody()
 55         });
 56         
 57         win.show();
 58         
 59         wingroup.register(win);        //把窗体对象注册给ZindexManger
 60     }
 61     
 62     var btn1 = Ext.create('Ext.button.Button',{
 63         text:'全部隐藏' , 
 64         renderTo:Ext.getBody(),
 65         handler:function(){
 66             wingroup.hideAll();        //隐藏所有被管理起来的window组件
 67         }
 68     });
 69     
 70     var btn2 = new Ext.button.Button({
 71         text:'全部显示' , 
 72         renderTo:Ext.getBody(),
 73         handler:function(){
 74             wingroup.each(function(cmp){
 75                 cmp.show();
 76             });
 77         }        
 78     });
 79     
 80     var btn3 = new Ext.button.Button({
 81         text:'把第三个窗口显示在最前端' , 
 82         renderTo:Ext.getBody(),
 83         handler:function(){
 84             wingroup.bringToFront('win_3'); //把当前的组件显示到最前端
 85         }        
 86     });    
 87     
 88     
 89     var btn4 = new Ext.button.Button({
 90         text:'把第五个窗口显示在最末端' , 
 91         renderTo:Ext.getBody(),
 92         handler:function(){
 93             wingroup.sendToBack('win_5');    //把当前的组件显示到最后
 94         }        
 95     });    
 96     
 97     var btn5 = new Ext.button.Button({
 98         text:'获取信息' , 
 99         renderTo:Ext.getBody(),
100         handler:function(){
101             wingroup.each(function(cmp){
102                 var id = '#'+cmp.getId();
103                 alert(cmp.getId()+' 宽：'+cmp.getWidth()+' 高：'+cmp.getHeight()+ ' left：'+$(id).position().left + 'px top：'+$(id).position().top+'px  html：'+cmp.body.dom.innerHTML);
104             });
105         }        
106     });
107 
108     
109     
110 });

 

posted @ 2017-03-27 15:18  港城人民  阅读(195)  评论(0)    收藏  举报