(Ext 基础篇) 布局

所谓布局，简单来说就是决定把什么东西放到什么位置上，对于管理软件来说，一般都是首部放标题，左边放菜单栏，空余的右下方用来显示具体的内容。本章将详细介绍EXT中布局的用法。

一、传统的布局方式

我们可以用Ext.Viewport类对整个页面进行整体布局，具体使用方法如下：

 

1. var viewport=new Ext.Viewport({ 
2.                 layout:'border', 
3.                 items:[{ 
4.                     region:'north', 
5.                     height:40, 
6.                     html:'<h1>薛敬明专栏</h1>' 
7.                 },{ 
8.                     region:'west', 
9.                     width:100, 
10.                     html:'<p>菜单一</p><p>菜单二</p>' 
11.                 },{ 
12.                     region:'center', 
13.                     html:'主要内容' 
14.                 }] 
15.             }); 

var viewport=new Ext.Viewport({ layout:'border', items:[{ region:'north', height:40, html:'<h1>薛敬明专栏</h1>' },{ region:'west', width:100, html:'<p>菜单一</p><p>菜单二</p>' },{ region:'center', html:'主要内容' }] });

相关属性：

layout:布局样式（border布局）

items:包含其他组件

region:组件位置

效果图如图1所示：

Fit布局

如果从复杂度来说fit布局应该算是最简单的了，设置是最少的。Fit布局同样也是设置父容器的layout属性，但是子容器不用设置任何相应属性。它的目的就是为了让子容器能够自适应于父容器（用了fit布局子容器设置宽度无效），但是请注意如果父容器有多个子容器，只会显示第一个。

[javascript] view plain copy print ?

1. var pnSub1=new Ext.Panel({ 
2.     title:"子panel1", 
3.     html:"子panel1（会显示）" 
4. }); 
5. var pnSub2=new Ext.Panel({ 
6.     title:"子panel2", 
7.     html:"子panel2（不会显示）" 
8. }); 
9. var pn=new Ext.Panel({ 
10.     renderTo:"divPanel", 
11.     title:"父panel", 
12.     width:800, 
13.     height:200, 
14.     layout:"fit", 
15.     items:[ 
16.         pnSub1, 
17.         pnSub2 
18.     ] 
19. }); 

var pnSub1=new Ext.Panel({ title:"子panel1", html:"子panel1（会显示）" }); var pnSub2=new Ext.Panel({ title:"子panel2", html:"子panel2（不会显示）" }); var pn=new Ext.Panel({ renderTo:"divPanel", title:"父panel", width:800, height:200, layout:"fit", items:[ pnSub1, pnSub2 ] });

效果：

可以看出只显示了第一个panle，而且它是自适应的，我们没有设置高度和宽度。

最常用的边框布局（BoardLayout）

Ext.layout.BorderLayout布局把整个布局区域分成东、西、南、北、中5个部分，除了中间区域以外，其他的区域又都是可以省略的，因此我们可以利用它制作出更复杂、更灵活的布局。具体代码如下：

[c-sharp] view plain copy print ?

1. var viewport2=new Ext.Viewport({ 
2.     layout:'border', 
3.     items:[{ 
4.         region:'north',html:'north' 
5.     },{ 
6.         region:'south',html:'south' 
7.     },{ 
8.         region:'east',html:'east' 
9.     },{ 
10.         region:'west',html:'west' 
11.     },{ 
12.         region:'center',html:'center' 
13.     }] 
14. }); 

var viewport2=new Ext.Viewport({ layout:'border', items:[{ region:'north',html:'north' },{ region:'south',html:'south' },{ region:'east',html:'east' },{ region:'west',html:'west' },{ region:'center',html:'center' }] });

效果图如图2所示。

图2 使用BorderLayout的布局

注意：center是绝对不能省略的，如果items中缺少了region:'center'就会报错，会造成程序中断。

2.1 设置子区域的大小

我们仅仅需要添加width和height参数，这样就可以指定每个子区域的大小了。但是，north和south两个区域只能指定高度值，宽度值由BorderLayout自动计算；east和west只能指定宽度值，高度值由BorderLayout自动计算；center区域的大小由其他4个部分决定。设置的代码如下所示：

[c-sharp] view plain copy print ?

1. var viewport2=new Ext.Viewport({ 
2.                 layout:'border', 
3.                 items:[{ 
4.                     region:'north',html:'north',height:120 
5.                 },{ 
6.                     region:'south',html:'south' 
7.                 },{ 
8.                     region:'east',html:'east' 
9.                 },{ 
10.                     region:'west',html:'west',width:40 
11.                 },{ 
12.                     region:'center',html:'center' 
13.                 }] 
14.             }); 

var viewport2=new Ext.Viewport({ layout:'border', items:[{ region:'north',html:'north',height:120 },{ region:'south',html:'south' },{ region:'east',html:'east' },{ region:'west',html:'west',width:40 },{ region:'center',html:'center' }] });

2.2 使用split并限制它的范围

使用split后，我们可以允许用户自动拖放以改变某一个区域的大小，实现的方式只要设置split:true参数即可实现，具体代码如下。

实现效果图如图3所示。

[c-sharp] view plain copy print ?

1. var viewport=new Ext.Viewport({ 
2.     layout:'border', 
3.     items:[{ 
4.         region:'north',                     
5.         height:40, 
6.         html:'<h1>薛敬明专栏</h1>' 
7.     },{ 
8.         region:'west',                     
9.         html:'<p>菜单一</p><p>菜单二</p>', 
10.         width:100, 
11.         split:true 
12.     },{ 
13.         region:'center', 
14.         html:'主要内容' 
15.     }] 
16. }); 

var viewport=new Ext.Viewport({ layout:'border', items:[{ region:'north', height:40, html:'<h1>薛敬明专栏</h1>' },{ region:'west', html:'<p>菜单一</p><p>菜单二</p>', width:100, split:true },{ region:'center', html:'主要内容' }] });

图3 设置split:true后的效果图

2.3 子区域的展开和折叠

该功能可以让一个区域展开和折叠(相当于隐藏)，实现的方式只需要配置几个参数即可，具体代码如下，主要配置参数是collapsible:true，这个参数激活了某个区域的折叠功能，而且前面的title参数也是必须设置的。实现代码和效果图如下所示。

[c-sharp] view plain copy print ?

1. var viewport=new Ext.Viewport({ 
2.                layout:'border', 
3.                items:[{ 
4.                    region:'north', 
5.                     
6.                    height:40, 
7.                    html:'<h1>薛敬明专栏</h1>' 
8.                },{ 
9.                    region:'west',                     
10.                    html:'<p>菜单一</p><p>菜单二</p>', 
11.                    title:'west', 
12.                    width:100, 
13.                    //split:true 
14.                    collapsible:true 
15.                },{ 
16.                    region:'center', 
17.                    html:'主要内容' 
18.                }] 
19.            }); 

var viewport=new Ext.Viewport({ layout:'border', items:[{ region:'north', height:40, html:'<h1>薛敬明专栏</h1>' },{ region:'west', html:'<p>菜单一</p><p>菜单二</p>', title:'west', width:100, //split:true collapsible:true },{ region:'center', html:'主要内容' }] });

图4 带有折叠效果的布局

三、制作伸缩菜单的布局——Accordion

Accordion是EXT中默认布局的一部分，如果想用它，直接将区域加上layout:'accordion'即可，其他部分基本无需改动。我们利用ViewPort制作出只有west和center两个区域的BorderLayout，在west部分放上Accordion，实现方式如下面代码所示。

[c-sharp] view plain copy print ?

1. var viewport=new Ext.Viewport({ 
2.                 layout:'border', 
3.                 items:[{ 
4.                     region:'west', 
5.                     width:200, 
6.                     layout:'accordion', 
7.                     layoutConfig:{ 
8.                         titleCollapse:true, 
9.                         animate:true, 
10.                         activeOnTop:false 
11.                     }, 
12.                     items:[{ 
13.                         title:'第一栏', 
14.                         html:'第一栏' 
15.                     },{ 
16.                        title:'第二栏', 
17.                         html:'第二栏'  
18.                     },{ 
19.                        title:'第三栏', 
20.                         html:'第三栏'  
21.                     }] 
22.                 },{ 
23.                     region:'center', 
24.                     split:true, 
25.                     border:true 
26.                 }] 
27.             }); 

var viewport=new Ext.Viewport({ layout:'border', items:[{ region:'west', width:200, layout:'accordion', layoutConfig:{ titleCollapse:true, animate:true, activeOnTop:false }, items:[{ title:'第一栏', html:'第一栏' },{ title:'第二栏', html:'第二栏' },{ title:'第三栏', html:'第三栏' }] },{ region:'center', split:true, border:true }] });

效果图如图5所示。

图5 使用了Accordion的示例

设置了layout:'accordion'后，再使用items添加3个元素，记得每个子元素里都要加上title参数，accordion没有提供默认的标题，不设置标题是一定会出错的。与布局有关的配置项都写到layoutConfig里

Form布局

这个布局是专门为表单而设计的布局方式，当然多数是用在FormPanel中（它也是FormPanel默认的布局方式）。我们前面说过FormPanel但是没有涉及复杂布局，事实实际应用中更多的是较复杂的布局。

比较一下下面两幅图有什么区别，我想除了标题是没有任何区别的吧，但是事实上这是两种组件，一个是Panel另一个是FormPanel：

[javascript] view plain copy print ?

1. new Ext.Panel({ 
2.     renderTo:"divPanel", 
3.     title:"这个是Panel", 
4.     width:300, 
5.     height:120, 
6.     bodyStyle:'padding:10', 
7.     layout:"form", 
8.     hideLabels:false, 
9.     labelAlighn:"right", 
10.     defaultType:"textfield", 
11.     items:[ 
12.         {fieldLabel:"姓名",name:"name"}, 
13.         {fieldLabel:"年龄",name:"age"} 
14.     ] 
15. }); 
16. new Ext.FormPanel({ 
17.     renderTo:"divPane2", 
18.     title:"这个是FormPanel", 
19.     width:300, 
20.     height:120, 
21.     bodyStyle:'padding:10', 
22.     layout:"form", 
23.     hideLabels:false, 
24.     labelAlighn:"right", 
25.     defaultType:"textfield", 
26.     items:[ 
27.         {fieldLabel:"姓名",name:"name"}, 
28.         {fieldLabel:"年龄",name:"age"} 
29.     ] 
30. }); 

new Ext.Panel({ renderTo:"divPanel", title:"这个是Panel", width:300, height:120, bodyStyle:'padding:10', layout:"form", hideLabels:false, labelAlighn:"right", defaultType:"textfield", items:[ {fieldLabel:"姓名",name:"name"}, {fieldLabel:"年龄",name:"age"} ] }); new Ext.FormPanel({ renderTo:"divPane2", title:"这个是FormPanel", width:300, height:120, bodyStyle:'padding:10', layout:"form", hideLabels:false, labelAlighn:"right", defaultType:"textfield", items:[ {fieldLabel:"姓名",name:"name"}, {fieldLabel:"年龄",name:"age"} ] });

从代码我们也可看出来，区别就是对于Panel我们配置了layout为form，从这也能看出来说FormPanel默认的布局就是form布局，所以对于习惯于用Panel而不习惯用FormPanel的朋友尽管用Panel,但是一定要考虑好提交的问题，如果使用panel的话，要做提交可是要一个个获得控件的值的，而FromPanel则不需要。

另外一我们需要扩展一下，因为实际的布局要比这复杂。

这个表单虽然不算是太复杂，但是比较有代表性，基本上常用的控件都放上去了，也包含了常见的radio多列布局。好了看代码吧：

[javascript] view plain copy print ?

1. Ext.onReady(function(){ 
2.     var pnRow1=new Ext.Panel({ 
3.         border:false, 
4.         layout:'column', 
5.         items:[ 
6.             new Ext.Panel({ 
7.                 columnWidth:.5, 
8.                 layout:'form', 
9.                 border:false, 
10.                 labelWidth:40, 
11.                 labelAlign:'right', 
12.                 items:[ 
13.                     { 
14.                         xtype:'textfield', 
15.                         fieldLabel:'姓名', 
16.                         name:'uname', 
17.                         anchor:'95%' 
18.                     } 
19.                 ] 
20.             }), 
21.             new Ext.Panel({ 
22.                 columnWidth:.3, 
23.                 layout:'form', 
24.                 border:false, 
25.                 labelWidth:40, 
26.                 labelAlign:'right', 
27.                 items:[ 
28.                     { 
29.                         xtype:'radio', 
30.                         fieldLabel:'性别', 
31.                         boxLabel:'男', 
32.                         name:'sex', 
33.                         inputValue:'男', 
34.                         checked:true, 
35.                         anchor:"95%" 
36.                     } 
37.                 ] 
38.             }), 
39.             new Ext.Panel({ 
40.                 columnWidth:.2, 
41.                 layout:'form', 
42.                 border:false, 
43.                 labelWidth:1, 
44.                 items:[ 
45.                     { 
46.                         xtype:'radio', 
47.                         boxLabel:'女', 
48.                         name:'sex', 
49.                         inputValue:'女', 
50.                         labelSeparator:'', 
51.                         anchor:"95%" 
52.                     } 
53.                 ] 
54.             }) 
55.         ] 
56.     }); 
57.     var pnRow2=new Ext.Panel({ 
58.         layout:'column', 
59.         border:false, 
60.         items:[ 
61.             new Ext.Panel({ 
62.                 columnWidth:.5, 
63.                 layout:'form', 
64.                 border:false, 
65.                 labelWidth:40, 
66.                 labelAlign:'right', 
67.                 items:[ 
68.                     { 
69.                         xtype:'datefield', 
70.                         name:'birthday', 
71.                         fieldLabel:'生日', 
72.                         anchor:'95%' 
73.                     } 
74.                 ] 
75.             }), 
76.             new Ext.Panel({ 
77.                 columnWidth:.5, 
78.                 layout:'form', 
79.                 border:false, 
80.                 labelWidth:40, 
81.                 labelAlign:'right', 
82.                 items:[ 
83.                     { 
84.                         xtype:'combo', 
85.                         name:'study', 
86.                         store:['专科','本科','硕士','博士'], 
87.                         fieldLabel:'学历', 
88.                         anchor:'95%' 
89.                     } 
90.                 ] 
91.             }) 
92.         ] 
93.     }); 
94.     var pnRow3=new Ext.Panel({ 
95.         layout:'column', 
96.         border:false, 
97.         items:[ 
98.             new Ext.Panel({ 
99.                 columnWidth:.3, 
100.                 layout:'form', 
101.                 border:false, 
102.                 labelWidth:40, 
103.                 labelAlign:'right', 
104.                 items:[ 
105.                     { 
106.                         xtype:'checkbox', 
107.                         name:'hoby', 
108.                         inputValue:'computer', 
109.                         fieldLabel:'爱好', 
110.                         boxLabel:'计算机', 
111.                         anchor:'95%' 
112.                     } 
113.                 ] 
114.             }), 
115.             new Ext.Panel({ 
116.                 columnWidth:.3, 
117.                 layout:'form', 
118.                 border:false, 
119.                 labelWidth:1, 
120.                 labelAlign:'right', 
121.                 items:[ 
122.                     { 
123.                         xtype:'checkbox', 
124.                         name:'hoby', 
125.                         inputValue:'football', 
126.                         boxLabel:'足球', 
127.                         labelSeparator:'', 
128.                         anchor:'95%' 
129.                     } 
130.                 ] 
131.             }), 
132.             new Ext.Panel({ 
133.                 columnWidth:.4, 
134.                 layout:'form', 
135.                 border:false, 
136.                 labelWidth:1, 
137.                 labelAlign:'right', 
138.                 items:[ 
139.                     { 
140.                         xtype:'checkbox', 
141.                         name:'hoby', 
142.                         intputValue:'tinyTable', 
143.                         boxLabel:'乒乓球', 
144.                         labelSeparator:'', 
145.                         anchor:'95%' 
146.                     } 
147.                 ] 
148.             }) 
149.         ] 
150.     }); 
151.      
152.     var pnRow4=new Ext.Panel({//当然这里直接在FormPanel中添加TextField就可以了，因为只有一行，但是为了一致以及对齐方便我这里还是放到了panel中 
153.         layout:'form', 
154.         border:false, 
155.         labelWidth:40, 
156.         labelAlign:'right', 
157.         items:[ 
158.             { 
159.                 xtype:'textfield', 
160.                 name:'email', 
161.                 fieldLabel:'住址', 
162.                 anchor:'98%' 
163.             } 
164.         ] 
165.     }); 
166.     var pnRow5=new Ext.Panel({ 
167.         layout:'form', 
168.         border:false, 
169.         labelWidth:40, 
170.         labelAlign:'right', 
171.         items:[ 
172.             { 
173.                 xtype:'htmleditor', 
174.                 name:'note', 
175.                 fieldLabel:'备注', 
176.                 height:200, 
177.                 anchor:'98%' 
178.             } 
179.         ] 
180.     }); 
181.      
182.     new Ext.FormPanel({ 
183.         renderTo:"divPanel", 
184.         title:"个人信息录入", 
185.         width:600, 
186.         bodyStyle:'padding:10px', 
187.         layout:"form", 
188.         items:[ 
189.             pnRow1, 
190.             pnRow2, 
191.             pnRow3, 
192.             pnRow4, 
193.             pnRow5 
194.         ] 
195.     }); 
196. });