[ExtJS 4.2.1] Panel Maximizable

最新推荐文章于 2024-08-18 10:54:05 发布

weixin_30332705

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量110

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/eaxu/p/3724166.html

版权

今天记录一下，造了个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>

转载于:https://www.cnblogs.com/eaxu/p/3724166.html

weixin_30332705

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[ExtJS 4.2.1] Panel Maximizable

今天记录一下，造了个Simple Maximizable Panel。一切从简，没有封装成Plugin，没有加入animate，没有修正resize event。贴上源码: 1  2 <!DOCTYPE html> 3 <html> 4 <head> ...
复制链接

扫一扫