今天记录一下， 造了个Simple Maximizable Panel。
一切从简， 没有封装成Plugin， 没有加入animate， 没有修正resize event。
贴上源码:
1 <!-- coded by eaxu --> 2 <!DOCTYPE html> 3 <html> 4 <head> 5 <title>panel-maximizable.html</title> 6 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 7 <link rel="stylesheet" type="text/css" href="http://extjs-public.googlecode.com/svn/tags/extjs-4.2.1/release//resources/css/ext-all-gray.css" /> 8 <script type="text/javascript" src="http://extjs-public.googlecode.com/svn/tags/extjs-4.2.1/release/ext-all.js"></script> 9 <style type="text/css"> 10 .maxed { 11 z-index: 10000; 12 } 13 </style> 14 <script type="text/javascript"> 15 Ext.onReady(function(){ 16 Ext.create(‘Ext.container.Viewport‘,{ 17 layout: { 18 type: ‘border‘, 19 padding: ‘0 5 5 5‘ 20 }, 21 items: [{ 22 title: ‘center‘, 23 region: ‘center‘, 24 id: ‘centerArea‘, 25 flex: 8, 26 layout: { 27 type: ‘table‘, 28 columns: 3 29 }, 30 overflowX: ‘hidden‘, 31 overflowY: ‘auto‘, 32 defaults: { 33 xtype: ‘panel‘, 34 height: 300, 35 width: 300, 36 tools: [{ 37 itemId: ‘maximize‘, 38 type: ‘maximize‘, 39 hidden: false, 40 callback: function() { 41 var parent = Ext.getCmp(‘centerArea‘), 42 parentBody = Ext.get(‘centerArea-body‘), 43 panel = this.up(‘panel‘); 44 45 // record the original cfg 46 Ext.apply(panel, { 47 oXY: panel.getXY(), 48 oWidth: panel.getWidth(), 49 oHeight: panel.getHeight() 50 }); 51 52 //disable the Y scroll 53 parentBody.dom.style.overflowY = ‘hidden‘; 54 55 panel.addCls(‘maxed‘); 56 panel.showAt(parentBody.getXY()); 57 panel.setWidth(parentBody.getWidth()); 58 panel.setHeight(parentBody.getHeight()); 59 this.up().down(‘#minimize‘).show(); 60 this.hide(); 61 } 62 }, { 63 itemId: ‘minimize‘, 64 type: ‘minimize‘, 65 hidden: true, 66 callback: function() { 67 var parent = Ext.getCmp(‘centerArea‘), 68 parentBody = Ext.get(‘centerArea-body‘), 69 panel = this.up(‘panel‘); 70 panel.removeCls(‘maxed‘); 71 panel.setWidth(panel.oWidth); 72 panel.setHeight(panel.oHeight); 73 panel.showAt(panel.oXY); 74 this.up().down(‘#maximize‘).show(); 75 this.hide(); 76 //enable the Y scroll 77 parentBody.dom.style.overflowY = ‘auto‘; 78 } 79 }] 80 }, 81 items: [{ 82 xtype: ‘panel‘, 83 title: ‘panel 1‘, 84 height: 300, 85 width: 300, 86 id: ‘panel1‘ 87 }, { 88 xtype: ‘panel‘, 89 title: ‘panel 2‘, 90 width: 300, 91 height: 300, 92 id: ‘panel2‘ 93 }, { 94 xtype: ‘panel‘, 95 title: ‘panel 3‘, 96 width: 300, 97 height: 300, 98 id: ‘panel3‘ 99 }, { 100 xtype: ‘panel‘, 101 title: ‘panel 4‘, 102 width: 300, 103 height: 300, 104 id: ‘panel4‘ 105 }, { 106 xtype: ‘panel‘, 107 title: ‘panel 5‘, 108 width: 300, 109 height: 300, 110 id: ‘panel5‘ 111 }, { 112 xtype: ‘panel‘, 113 title: ‘panel 6‘, 114 width: 300, 115 height: 300, 116 id: ‘panel6‘ 117 }, { 118 xtype: ‘panel‘, 119 title: ‘panel 7‘, 120 width: 300, 121 height: 300, 122 id: ‘panel7‘ 123 }, { 124 xtype: ‘panel‘, 125 title: ‘panel 8‘, 126 width: 300, 127 height: 300, 128 id: ‘panel8‘ 129 }] 130 }, { 131 region: ‘west‘, 132 title: ‘west‘, 133 flex: 2 134 }], 135 renderTo: Ext.getBody() 136 }); 137 }); 138 </script> 139 </head> 140 <body> 141 </body> 142 </html>