[ExtJS 4.2.1] Panel Maximizable
2020-12-13 03:07
标签:style blog class code java c 今天记录一下, 造了个Simple Maximizable Panel。 一切从简, 没有封装成Plugin, 没有加入animate, 没有修正resize event。 贴上源码: [ExtJS 4.2.1] Panel Maximizable,搜素材,soscw.com [ExtJS 4.2.1] Panel Maximizable 标签:style blog class code java c 原文地址:http://www.cnblogs.com/eaxu/p/3724166.html 1
2 DOCTYPE html>
3 html>
4 head>
5 title>panel-maximizable.htmltitle>
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>
文章标题:[ExtJS 4.2.1] Panel Maximizable
文章链接:http://soscw.com/essay/27002.html