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 });