码迷,mamicode.com
首页 > Web开发 > 详细

[ExtJS 4.2.1] Panel Maximizable

时间:2014-05-13 20:57:54      阅读:502      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   java   c   

今天记录一下, 造了个Simple Maximizable Panel。

一切从简, 没有封装成Plugin, 没有加入animate, 没有修正resize event。

贴上源码:

bubuko.com,布布扣
  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>
bubuko.com,布布扣

 

[ExtJS 4.2.1] Panel Maximizable,布布扣,bubuko.com

[ExtJS 4.2.1] Panel Maximizable

标签:style   blog   class   code   java   c   

原文地址:http://www.cnblogs.com/eaxu/p/3724166.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!