目标：
介绍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 width: 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 width: 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 width: 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 width: 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 width: 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 width: 100 ,
182 height: 50 ,
183 title: ' 子面板 '
184 },
185 {
186 x: 90 ,
187 y: 70 ,
188 width: 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 width: 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 width: 300 ,
229 height: 200 ,
230 x: 300 ,
231 y: 50 ,
232 floating: true ,
233 layout: ' column ' ,
234 items:[
235 {
236 title: ' 面板1 ' ,
237 width: 100 ,
238 height: 100
239 },
240 {
241 title: ' 面板2 ' ,
242 width: 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 width: 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 width: 100 ,
323 title: " 左边面板 "
324 },
325 {
326 region: " east " ,
327 width: 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 width: 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 width: 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 >
414