目标：
介绍Panel布局的各种类
Panel布局类在VS中的介绍
内容：
Panel布局类有10种：容器布局，自适应布局，折叠布局，卡片式布局，锚点布局，绝对位置布局，表单布局，列布局，表格布局，边框布局
1，Ext.layout.ContainerLayout 容器布局
提供容器作为布局的基础逻辑，通常会被扩展而不通过new 关键字直接创建，一般作为默认布局存在
2，Ext.layout.FitLayout 自适应布局
使用layout:'fit' 将使面板子元素自动充满容器，如果有多个子面板也只会第一个会被显示
3，Ext.layout.AccordionLayout 折叠布局 （很常有哦！！！）
扩展自适应布局，layout:'accordion' 它包含了多个子面板，任何时候都只有一个子面板处于打开状态，每个面板都有展开和收缩的功能
4 ，Ext.layout.CardLayout 卡片式布局 （也很有用的哦！！）
扩展自适应布局，layout:'card' 它包含了多个子面板，只有一个面板处于显示状态，它用来制作向导或标签页，使用setActiveItem来激火面板
5，Ext.layout.AnchorLayout 锚点布局
根据容器的大小为其所包含的子面板进行定位的布局 layout:'anchor' 分为：百分比，偏移，参考边 三种方式的定位
6，Ext.layout.AbsoluteLayout 绝对位置布局
根据面板中配置 x/y 坐标进行定位，layout:'absolute' 坐标值支持使用固定值和百分比两种形式
7，Ext.layout.FormLayout 表单布局
用来管理表单字段的显示，内制了表单布局，提供了表单提交，读取等表单功能，layout:'form'
8, Ext.layout.ColumnLayout 列布局
多列风格的布局格式，每一列的宽度都可以通过百分比和数值确定宽度，layout:'column'
9, Ext.layout.TableLayout 表格布局
可以指定列数，跨行，跨列，可以创建出复杂的表格布局 layout:'table'
10, Ext.layout.BorderLayout 边框布局
该布局包含多个面板，是一个面向应用的UI风格的布局，它包含5个部分：east,south,west,north,center,layout:'border' 通过region来配置面板
viewport的应用：作为浏览器窗口的整个显示部分，其有着panel的功能，但是一定要注意的是一个页面只有一个viewport
示例分析部分
Extjs面板布局介绍
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ext6.aspx.cs" Inherits="EXT1.Ext6"%>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head runat="server">
7 <title>第六课,Extjs中面板布局的应用</title>
8 <link href="ext-3.2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css"/>
9 <script src="ext-3.2.0/adapter/ext/ext-base.js" type="text/javascript"></script>
10 <script src="ext-3.2.0/ext-all.js" type="text/javascript"></script>
11 <script type="text/javascript">
12 function Read1() {
13 var MyPanel=new Ext.Panel({
14 title:'自适应布局',
15 250,
16 height:200,
17 x:300,
18 y:50,
19 floating:true,
20 renderTo:id1,
21 frame:true,
22 layout:'fit',
23 items:[
24 {
25 title:"面板一",
26 html:"面板一内容"
27 },
28 {
29 title:'面板二',
30 html:'面板二内容'
31 }
32 ]
33 });
34 }
35 function Read2() {
36 var Mypanel=new Ext.Panel({
37 layout:'accordion',
38 title:'折叠布局',
39 renderTo:id1,
40 250,
41 height:300,
42 x:300,
43 y:50,
44 floating:true,
45 frame:true,
46 collapsible:true,
47 titleCollapse:true,
48 layoutConfig:{
49 activeOnTop:false,
50 fill:true,
51 hideCollapseTool:false,
52 titleCollapse:true,
53 animate:true
54 },
55 items:[
56 {
57 title:"面板一",
58 html:"面板一内容"
59 },
60 {
61 title:'面板二',
62 html:'面板二内容'
63 },
64 {
65 title:'面板3',
66 html:'面板3内容'
67 },
68 {
69 title:'面板4',
70 html:'面板4内容'
71 },
72 {
73 title:'面板5',
74 html:'面板5内容'
75 }
76
77 ]
78 });
79 }
80 function Read3() {
81 var Mypanel=new Ext.Panel({
82 layout:'card',
83 title:'卡片布局',
84 renderTo:id1,
85 250,
86 height:300,
87 x:300,
88 y:50,
89 floating:true,
90 frame:true,
91 collapsible:true,
92 titleCollapse:true,
93 activeItem:0,
94
95 items:[
96 {
97 title:"面板一",
98 html:"面板一内容",
99 id:'p1'
100 },
101 {
102 title:'面板二',
103 html:'面板二内容',
104 id:'p2'
105 },
106 {
107 title:'面板三',
108 html:'面板三内容',
109 id:'p3'
110 }
111 ],
112 buttons:[
113 {
114 text:'上一页',
115 handler:change
116 },
117 {
118 text:'下一页',
119 handler:change
120 }
121 ]
122 });
123 function change(btn) {
124 var index=Number(Mypanel.layout.activeItem.id.substring(1));
125 if (btn.text=='上一页') {
126 index-=1;
127 if (index<1) {
128 index=1;
129 }
130 }
131 else
132 {
133 index+=1;
134 if (index>3) {
135 index=3;
136 }
137 }
138 Mypanel.layout.setActiveItem('p'+index);
139 }
140 }
141 function Read4() {
142 var Mypanel=new Ext.Panel({
143 title:'锚点布局',
144 renderTo:id1,
145 frame:true,
146 300,
147 height:200,
148 x:300,
149 y:50,
150 floating:true,
151 collapsible:true,
152 titleCollapse:true,
153 layout:'anchor',
154 items:[{
155 anchor:'50%,50%',
156 draggable:true,
157 title:'子面板'
158 },
159 {
160 anchor:'-10,-10',
161 title:'子面板2'
162 }]
163 });
164 }
165 function Read5() {
166 var Mypanel=new Ext.Panel({
167 title:'绝对位置布局',
168 renderTo:id1,
169 frame:true,
170 300,
171 height:200,
172 x:300,
173 y:50,
174 floating:true,
175 collapsible:true,
176 titleCollapse:true,
177 layout:'absolute',
178 items:[{
179 x:'10%',
180 y:10,
181 100,
182 height:50,
183 title:'子面板'
184 },
185 {
186 x:90,
187 y:70,
188 100,
189 height:50,
190 title:'子面板2'
191 }]
192 });
193 }
194 function Read6() {
195 var MyPanel=new Ext.Panel({
196 layout:'form',
197 title:'表单布局',
198 renderTo:id1,
199 frame:true,
200 300,
201 height:200,
202 x:300,
203 y:50,
204 floating:true,
205 collapsible:true,
206 titleCollapse:true,
207 defaultType:'textfield',
208 labelSeparator:':',
209 defaults:{msgTarget:'side'},
210 items:[
211 {
212 fieldLabel:'用户名称',
213 allowBlank:false
214 },
215 {
216 fieldLabel:'用户密码',
217 allowBlank:false
218 }
219 ]
220 });
221 }
222 function Rand7() {
223 Ext.QuickTips.init();
224 var MyPanel=new Ext.Panel({
225 title:'列布局',
226 renderTo:id1,
227 frame:true,
228 300,
229 height:200,
230 x:300,
231 y:50,
232 floating:true,
233 layout:'column',
234 items:[
235 {
236 title:'面板1',
237 100,
238 height:100
239 },
240 {
241 title:'面板2',
242 100,
243 height:100
244 }
245 ]
246 });
247 }
248 function Read8() {
249 var Mypanel=new Ext.Panel({
250 title:'表格布局',
251 renderTo:id1,
252 frame:true,
253 400,
254 height:300,
255 x:350,
256 y:50,
257 floating:true,
258 collapsible:true,
259 titleCollapse:true,
260 draggable:{
261 insertProxy: false,//拖动时不虚线显示原始位置
262 onDrag : function(e){
263 var pel =this.proxy.getEl();
264 this.x = pel.getLeft(true);
265 this.y = pel.getTop(true);//获取拖动时panel的坐标
266 var s =this.panel.getEl().shadow;
267 if (s){
268 s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
269 }
270 },
271 endDrag : function(e){
272 this.panel.setPosition(this.x, this.y);//移动到最终位置
273 }
274 },
275 layout:'table',
276 layoutConfig:{
277 columns:3
278 },
279 items:[
280 {
281 title:'面板1',
282 html:'面板一内容',
283 rowspan:2,
284 height:80
285 },
286 {
287 title:'面板2',
288 html:'面板2内容',
289 colspan:2
290
291 },
292 {
293 title:'面板3'
294 },
295 {
296 title:'面板4'
297 }
298
299 ]
300 });
301 }
302 function Read9() {
303 var Mypanel=new Ext.Viewport({
304 layout:"border",
305 items:[
306 {
307 region:"north",
308 height:50,
309 title:"顶部面板"
310 },
311 {
312 region:"south",
313 height:50,
314 title:"底部面板"
315 },
316 {
317 region:"center",
318 title:"中央面板"
319 },
320 {
321 region:"west",
322 100,
323 title:"左边面板"
324 },
325 {
326 region:"east",
327 100,
328 title:"右边面板"
329 }
330 ]
331 });
332 }
333 function Read10() {
334 var b =new Ext.Button({
335 id:"show-btn", //定义按钮的ID
336 text:"弹出按钮", //定义按钮的标题
337 renderTo:document.body//将弹出按钮渲染到窗体上
338 });
339 var button = Ext.get('show-btn');
340 var win;
341 button.on('click', function() {
342 //创建TabPanel
343 var tabs =new Ext.TabPanel({
344 region: 'center', //border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间
345 margins: '3 3 3 0',
346 activeTab: 0, //当前选项卡是第1个(从0开始)
347 defaults: {
348 autoScroll: true
349 },
350 items:
351 [
352 {
353 title: 'Bogus Tab',
354 html: "第一个Tab的内容."
355 },
356 {
357 title: 'Another Tab',
358 html: "我是另一个Tab"
359 },
360 {
361 title: 'Closable Tab',
362 html: "这是一个可以关闭的Tab",
363 closable: true//显示关闭按钮
364 }
365 ]
366
367 });
368
369 //定义一个Panel
370 var nav =new Ext.Panel({
371 title: 'Navigation',
372 region: 'west', //放在西边，即左侧
373 split: true, //设置为分割
374 200,
375
376 collapsible: true, //允许伸缩
377 margins: '3 0 3 3',
378 cmargins: '3 3 3 3'
379 });
380
381 //如果窗口第一次被打开时才创建
382 if (!win) {
383 win =new Ext.Window({
384 title: 'Layout Window',
385 closable: true, //显示关闭按钮
386 600,
387
388 height: 350,
389
390 border : false,
391 plain: true,
392 layout: 'border',
393 closeAction:'hide',
394 items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局
395 });
396
397 }
398
399 win.show(button);
400
401 });
402 };
403 Ext.onReady(Read10);
404 </script>
405 </head>
406 <body>
407 <form id="form1" runat="server">
408 <div id="id1">
409
410 </div>
411 </form>
412 </body>
413 </html>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head runat="server">
7 <title>第六课,Extjs中面板布局的应用</title>
8 <link href="ext-3.2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css"/>
9 <script src="ext-3.2.0/adapter/ext/ext-base.js" type="text/javascript"></script>
10 <script src="ext-3.2.0/ext-all.js" type="text/javascript"></script>
11 <script type="text/javascript">
12 function Read1() {
13 var MyPanel=new Ext.Panel({
14 title:'自适应布局',
15 250,
16 height:200,
17 x:300,
18 y:50,
19 floating:true,
20 renderTo:id1,
21 frame:true,
22 layout:'fit',
23 items:[
24 {
25 title:"面板一",
26 html:"面板一内容"
27 },
28 {
29 title:'面板二',
30 html:'面板二内容'
31 }
32 ]
33 });
34 }
35 function Read2() {
36 var Mypanel=new Ext.Panel({
37 layout:'accordion',
38 title:'折叠布局',
39 renderTo:id1,
40 250,
41 height:300,
42 x:300,
43 y:50,
44 floating:true,
45 frame:true,
46 collapsible:true,
47 titleCollapse:true,
48 layoutConfig:{
49 activeOnTop:false,
50 fill:true,
51 hideCollapseTool:false,
52 titleCollapse:true,
53 animate:true
54 },
55 items:[
56 {
57 title:"面板一",
58 html:"面板一内容"
59 },
60 {
61 title:'面板二',
62 html:'面板二内容'
63 },
64 {
65 title:'面板3',
66 html:'面板3内容'
67 },
68 {
69 title:'面板4',
70 html:'面板4内容'
71 },
72 {
73 title:'面板5',
74 html:'面板5内容'
75 }
76
77 ]
78 });
79 }
80 function Read3() {
81 var Mypanel=new Ext.Panel({
82 layout:'card',
83 title:'卡片布局',
84 renderTo:id1,
85 250,
86 height:300,
87 x:300,
88 y:50,
89 floating:true,
90 frame:true,
91 collapsible:true,
92 titleCollapse:true,
93 activeItem:0,
94
95 items:[
96 {
97 title:"面板一",
98 html:"面板一内容",
99 id:'p1'
100 },
101 {
102 title:'面板二',
103 html:'面板二内容',
104 id:'p2'
105 },
106 {
107 title:'面板三',
108 html:'面板三内容',
109 id:'p3'
110 }
111 ],
112 buttons:[
113 {
114 text:'上一页',
115 handler:change
116 },
117 {
118 text:'下一页',
119 handler:change
120 }
121 ]
122 });
123 function change(btn) {
124 var index=Number(Mypanel.layout.activeItem.id.substring(1));
125 if (btn.text=='上一页') {
126 index-=1;
127 if (index<1) {
128 index=1;
129 }
130 }
131 else
132 {
133 index+=1;
134 if (index>3) {
135 index=3;
136 }
137 }
138 Mypanel.layout.setActiveItem('p'+index);
139 }
140 }
141 function Read4() {
142 var Mypanel=new Ext.Panel({
143 title:'锚点布局',
144 renderTo:id1,
145 frame:true,
146 300,
147 height:200,
148 x:300,
149 y:50,
150 floating:true,
151 collapsible:true,
152 titleCollapse:true,
153 layout:'anchor',
154 items:[{
155 anchor:'50%,50%',
156 draggable:true,
157 title:'子面板'
158 },
159 {
160 anchor:'-10,-10',
161 title:'子面板2'
162 }]
163 });
164 }
165 function Read5() {
166 var Mypanel=new Ext.Panel({
167 title:'绝对位置布局',
168 renderTo:id1,
169 frame:true,
170 300,
171 height:200,
172 x:300,
173 y:50,
174 floating:true,
175 collapsible:true,
176 titleCollapse:true,
177 layout:'absolute',
178 items:[{
179 x:'10%',
180 y:10,
181 100,
182 height:50,
183 title:'子面板'
184 },
185 {
186 x:90,
187 y:70,
188 100,
189 height:50,
190 title:'子面板2'
191 }]
192 });
193 }
194 function Read6() {
195 var MyPanel=new Ext.Panel({
196 layout:'form',
197 title:'表单布局',
198 renderTo:id1,
199 frame:true,
200 300,
201 height:200,
202 x:300,
203 y:50,
204 floating:true,
205 collapsible:true,
206 titleCollapse:true,
207 defaultType:'textfield',
208 labelSeparator:':',
209 defaults:{msgTarget:'side'},
210 items:[
211 {
212 fieldLabel:'用户名称',
213 allowBlank:false
214 },
215 {
216 fieldLabel:'用户密码',
217 allowBlank:false
218 }
219 ]
220 });
221 }
222 function Rand7() {
223 Ext.QuickTips.init();
224 var MyPanel=new Ext.Panel({
225 title:'列布局',
226 renderTo:id1,
227 frame:true,
228 300,
229 height:200,
230 x:300,
231 y:50,
232 floating:true,
233 layout:'column',
234 items:[
235 {
236 title:'面板1',
237 100,
238 height:100
239 },
240 {
241 title:'面板2',
242 100,
243 height:100
244 }
245 ]
246 });
247 }
248 function Read8() {
249 var Mypanel=new Ext.Panel({
250 title:'表格布局',
251 renderTo:id1,
252 frame:true,
253 400,
254 height:300,
255 x:350,
256 y:50,
257 floating:true,
258 collapsible:true,
259 titleCollapse:true,
260 draggable:{
261 insertProxy: false,//拖动时不虚线显示原始位置
262 onDrag : function(e){
263 var pel =this.proxy.getEl();
264 this.x = pel.getLeft(true);
265 this.y = pel.getTop(true);//获取拖动时panel的坐标
266 var s =this.panel.getEl().shadow;
267 if (s){
268 s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
269 }
270 },
271 endDrag : function(e){
272 this.panel.setPosition(this.x, this.y);//移动到最终位置
273 }
274 },
275 layout:'table',
276 layoutConfig:{
277 columns:3
278 },
279 items:[
280 {
281 title:'面板1',
282 html:'面板一内容',
283 rowspan:2,
284 height:80
285 },
286 {
287 title:'面板2',
288 html:'面板2内容',
289 colspan:2
290
291 },
292 {
293 title:'面板3'
294 },
295 {
296 title:'面板4'
297 }
298
299 ]
300 });
301 }
302 function Read9() {
303 var Mypanel=new Ext.Viewport({
304 layout:"border",
305 items:[
306 {
307 region:"north",
308 height:50,
309 title:"顶部面板"
310 },
311 {
312 region:"south",
313 height:50,
314 title:"底部面板"
315 },
316 {
317 region:"center",
318 title:"中央面板"
319 },
320 {
321 region:"west",
322 100,
323 title:"左边面板"
324 },
325 {
326 region:"east",
327 100,
328 title:"右边面板"
329 }
330 ]
331 });
332 }
333 function Read10() {
334 var b =new Ext.Button({
335 id:"show-btn", //定义按钮的ID
336 text:"弹出按钮", //定义按钮的标题
337 renderTo:document.body//将弹出按钮渲染到窗体上
338 });
339 var button = Ext.get('show-btn');
340 var win;
341 button.on('click', function() {
342 //创建TabPanel
343 var tabs =new Ext.TabPanel({
344 region: 'center', //border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间
345 margins: '3 3 3 0',
346 activeTab: 0, //当前选项卡是第1个(从0开始)
347 defaults: {
348 autoScroll: true
349 },
350 items:
351 [
352 {
353 title: 'Bogus Tab',
354 html: "第一个Tab的内容."
355 },
356 {
357 title: 'Another Tab',
358 html: "我是另一个Tab"
359 },
360 {
361 title: 'Closable Tab',
362 html: "这是一个可以关闭的Tab",
363 closable: true//显示关闭按钮
364 }
365 ]
366
367 });
368
369 //定义一个Panel
370 var nav =new Ext.Panel({
371 title: 'Navigation',
372 region: 'west', //放在西边，即左侧
373 split: true, //设置为分割
374 200,
375
376 collapsible: true, //允许伸缩
377 margins: '3 0 3 3',
378 cmargins: '3 3 3 3'
379 });
380
381 //如果窗口第一次被打开时才创建
382 if (!win) {
383 win =new Ext.Window({
384 title: 'Layout Window',
385 closable: true, //显示关闭按钮
386 600,
387
388 height: 350,
389
390 border : false,
391 plain: true,
392 layout: 'border',
393 closeAction:'hide',
394 items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局
395 });
396
397 }
398
399 win.show(button);
400
401 });
402 };
403 Ext.onReady(Read10);
404 </script>
405 </head>
406 <body>
407 <form id="form1" runat="server">
408 <div id="id1">
409
410 </div>
411 </form>
412 </body>
413 </html>