ExtJS之布局

Ext布局总的来说是很灵活的，因此我觉得有必要一块探讨一下。

Ext常用的布局都在Ext.layout下，这里几乎涵盖了所有的布局方式（但是值得注意的是通常我们不是直接通过"new"来创建这些类的对象然后往里面添加控件使用，而是作为控件一个配置属性使用让Ext自动创建对应的类），满足开发者需求。那么我们就其中常用的方式逐一介绍。

Border布局

Border布局是Ext中常用布局方式（经常用到整个页面的总体布局），感觉用的几率很大。在看代码之前先熟悉一种特殊的容器ViewPort，它是对于浏览器视窗的抽象，你可以将它理解为浏览器的可见区域，它将渲染到document.body并自动调整大小，一个页面只能创建一个Viewport。

[javascript] view plain copy print ?

1. new Ext.Viewport({  
2.     layout:"border",  
3.     items:[  
4.         {region:"north",title:"Up",height:50},  
5.         {region:"south",title:"Down",height:50},  
6.         {region:"west",title:"Left",width:200},  
7.         {region:"east",title:"Right",width:200},  
8.         {region:"center",title:"Center"}  
9.     ]  
10. });  

new Ext.Viewport({ layout:"border", items:[ {region:"north",title:"Up",height:50}, {region:"south",title:"Down",height:50}, {region:"west",title:"Left",width:200}, {region:"east",title:"Right",width:200}, {region:"center",title:"Center"} ] });

上面的代码很简单，首先Viewport将自动占满整个窗口，然后我们在Viewport中使用border布局（就是上面的layout:'border'）。Border布局的用法就是对于其子容器使用region来指示子容器所处的位置（例如上面region:'center'），之后子容器就会显示在其父所在容器的相应位置，这些位置是固定的只有上面我们列出的五个。但是请注意这五个部分不是必须都有的，但是至少要包含"center"（因为它是主体，没有主体如何放内容啊）。

效果：

上面的效果看起来不是太好看，而且我们上面说通常情况下我们没有必要五个部分都有的，那么我们稍微修改一下：

[javascript] view plain copy print ?

1. var pnNorth=new Ext.Panel({  
2.     id:'pnNorth',  
3.     autoWidth:true,  
4.     heigth:80,  
5.     frame:true,  
6.     region:'north',  
7.     html:'这里放置页头内容'  
8. });  
9. var pnWest=new Ext.Panel({  
10.     id:'pnWest',  
11.     title:'菜单项',  
12.     width:200,  
13.     heigth:'auto',  
14.     split:true,//显示分隔条  
15.     region:'west',  
16.     collapsible:true  
17.       
18. });  
19. var pnCenter=new Ext.TabPanel({  
20.     region:'center',  
21.     activeTab:0,  
22.     items:[  
23.         {  
24.             title:'收件箱',  
25.             authHeight:true,  
26.             closable:true,//是否可关闭  
27.             html:'这里显示所收邮件。。。'  
28.         }  
29.     ]  
30. });  
31. var vp=new Ext.Viewport({  
32.     layout:"border",  
33.     items:[  
34.         pnNorth,  
35.         pnWest,  
36.         pnCenter  
37.     ]  
38. });  

var pnNorth=new Ext.Panel({ id:'pnNorth', autoWidth:true, heigth:80, frame:true, region:'north', html:'这里放置页头内容' }); var pnWest=new Ext.Panel({ id:'pnWest', title:'菜单项', width:200, heigth:'auto', split:true,//显示分隔条 region:'west', collapsible:true }); var pnCenter=new Ext.TabPanel({ region:'center', activeTab:0, items:[ { title:'收件箱', authHeight:true, closable:true,//是否可关闭 html:'这里显示所收邮件。。。' } ] }); var vp=new Ext.Viewport({ layout:"border", items:[ pnNorth, pnWest, pnCenter ] });

效果：

还不错吧！

Column布局

从字面就知道Column布局就是列布局，例如我一个panel中还有两个子panel现在想要左侧显示一个右侧显示一个怎么办？这是可以选择Column将父Panel分为两列，左侧一个右侧一个。

[javascript] view plain copy print ?

1. var pnSub1=new Ext.Panel({  
2.     height:300,  
3.     columnWidth:.3,  
4.     html:'这是子panle1'  
5. });  
6. var pnSub2=new Ext.Panel({  
7.     height:300,  
8.     columnWidth:.7,  
9.     html:'这是子panle2'  
10. });  
11. var pn=new Ext.Panel({  
12.     id:'pn',  
13.     title:'父Panel',  
14.     renderTo:'divPanel',  
15.     width:800,  
16.     height:300,  
17.     layout:'column',  
18.     items:[  
19.         pnSub1,  
20.         pnSub2  
21.     ]  
22. });  

var pnSub1=new Ext.Panel({ height:300, columnWidth:.3, html:'这是子panle1' }); var pnSub2=new Ext.Panel({ height:300, columnWidth:.7, html:'这是子panle2' }); var pn=new Ext.Panel({ id:'pn', title:'父Panel', renderTo:'divPanel', width:800, height:300, layout:'column', items:[ pnSub1, pnSub2 ] });

效果

首先在父容器中设置"layout"为"column"然后在子容器中指定"columnWidth"的值（是比例）就可以显示了，很简单。

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，而且它是自适应的，我们没有设置高度和宽度。

Table布局

Table布局多数用在较为复杂的情况下，想一想做web开发总不能就上面几种简单情况吧，因此也就是说Table布局还是很常用的。当然，但是和其他布局相比其参数设置也稍微一些（不用怕，事实上还是很少的）。

[javascript] view plain copy print ?

1. new Ext.Panel({  
2.     title:"父Panel",  
3.     renderTo:"divPanel",                      
4.     width:900,  
5.     height:200,  
6.     layout:"table",  
7.     layoutConfig:{  
8.         columns:3                     
9.     },  
10.     defaults:{  
11.         height:100,  
12.         width:300  
13.     },  
14.     items:[  
15.         {  
16.             html:"第一个子panel(行：1,列：1)",  
17.             rowspan:2,//合并行   
18.             height:200  
19.         },  
20.         {  
21.             html:"第二个子panel(行：1,列：2)",  
22.             colspan:2,//合并列   
23.             width:600  
24.         },  
25.         {  
26.             html:"第三个子panel(行：2,列：1)"  
27.         },  
28.         {  
29.             html:"第四个子panel(行：2,列：2)"  
30.         }  
31.     ]  
32. });  

new Ext.Panel({ title:"父Panel", renderTo:"divPanel", width:900, height:200, layout:"table", layoutConfig:{ columns:3 }, defaults:{ height:100, width:300 }, items:[ { html:"第一个子panel(行：1,列：1)", rowspan:2,//合并行 height:200 }, { html:"第二个子panel(行：1,列：2)", colspan:2,//合并列 width:600 }, { html:"第三个子panel(行：2,列：1)" }, { html:"第四个子panel(行：2,列：2)" } ] });

效果：

我们上面的布局就是两行三列的布局，但是注意一点在layoutConfi中我们无需指定有几行，只要指定由几列就可以了，有几行往下写几行就可了。另外一点就是对于合并行列的时候记得指明高和宽否则可能出现你合并的行跟未合并的单元格一样高的情况。同Ext中多数布局一样也是在父容器指定对应的布局为"table"，然后子容器设置对应的参数（对table布局就是colspan等）。

上面的布局或许有些幼稚，真正这样做的不太多，我们稍微修改一下：

[javascript] view plain copy print ?

1. new Ext.Panel({  
2.     id:'pn',  
3.     title:"新闻",  
4.     renderTo:"divPanel",                      
5.     width:800,  
6.     height:500,  
7.     layout:"table",  
8.     bodyStyle:'padding:10 10 10 10',  
9.     layoutConfig:{  
10.         columns:2  
11.     },  
12.     defaults:{  
13.         height:220,  
14.         width:380,  
15.         frame:true  
16.     },  
17.     items:[  
18.         {  
19.             title:'国际',  
20.             html:"第一个子panel(行：1,列：1)",  
21.             bodyStyle:'padding:20'  
22.         },  
23.         {  
24.             title:'国内',  
25.             html:"第一个子panel(行：1,列：1)",  
26.             bodyStyle:'padding:20'  
27.         },  
28.         {  
29.             title:'新闻组图',  
30.             colspan:2,  
31.             html:"第一个子panel(行：1,列：1)",  
32.             bodyStyle:'padding:20;',  
33.             width:770  
34.         }  
35.     ]  
36. });  

new Ext.Panel({ id:'pn', title:"新闻", renderTo:"divPanel", width:800, height:500, layout:"table", bodyStyle:'padding:10 10 10 10', layoutConfig:{ columns:2 }, defaults:{ height:220, width:380, frame:true }, items:[ { title:'国际', html:"第一个子panel(行：1,列：1)", bodyStyle:'padding:20' }, { title:'国内', html:"第一个子panel(行：1,列：1)", bodyStyle:'padding:20' }, { title:'新闻组图', colspan:2, html:"第一个子panel(行：1,列：1)", bodyStyle:'padding:20;', width:770 } ] });

注意，还有样式：

[xhtml] view plain copy print ?

1. #pn td {  
2.     padding:5px;  
3. }  

#pn td { padding:5px; }

效果：

上面看起来还可以吧，这就是table布局出来的啊，O(∩_∩)O~！

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. });  

Ext.onReady(function(){ var pnRow1=new Ext.Panel({ border:false, layout:'column', items:[ new Ext.Panel({ columnWidth:.5, layout:'form', border:false, labelWidth:40, labelAlign:'right', items:[ { xtype:'textfield', fieldLabel:'姓名', name:'uname', anchor:'95%' } ] }), new Ext.Panel({ columnWidth:.3, layout:'form', border:false, labelWidth:40, labelAlign:'right', items:[ { xtype:'radio', fieldLabel:'性别', boxLabel:'男', name:'sex', inputValue:'男', checked:true, anchor:"95%" } ] }), new Ext.Panel({ columnWidth:.2, layout:'form', border:false, labelWidth:1, items:[ { xtype:'radio', boxLabel:'女', name:'sex', inputValue:'女', labelSeparator:'', anchor:"95%" } ] }) ] }); var pnRow2=new Ext.Panel({ layout:'column', border:false, items:[ new Ext.Panel({ columnWidth:.5, layout:'form', border:false, labelWidth:40, labelAlign:'right', items:[ { xtype:'datefield', name:'birthday', fieldLabel:'生日', anchor:'95%' } ] }), new Ext.Panel({ columnWidth:.5, layout:'form', border:false, labelWidth:40, labelAlign:'right', items:[ { xtype:'combo', name:'study', store:['专科','本科','硕士','博士'], fieldLabel:'学历', anchor:'95%' } ] }) ] }); var pnRow3=new Ext.Panel({ layout:'column', border:false, items:[ new Ext.Panel({ columnWidth:.3, layout:'form', border:false, labelWidth:40, labelAlign:'right', items:[ { xtype:'checkbox', name:'hoby', inputValue:'computer', fieldLabel:'爱好', boxLabel:'计算机', anchor:'95%' } ] }), new Ext.Panel({ columnWidth:.3, layout:'form', border:false, labelWidth:1, labelAlign:'right', items:[ { xtype:'checkbox', name:'hoby', inputValue:'football', boxLabel:'足球', labelSeparator:'', anchor:'95%' } ] }), new Ext.Panel({ columnWidth:.4, layout:'form', border:false, labelWidth:1, labelAlign:'right', items:[ { xtype:'checkbox', name:'hoby', intputValue:'tinyTable', boxLabel:'乒乓球', labelSeparator:'', anchor:'95%' } ] }) ] }); var pnRow4=new Ext.Panel({//当然这里直接在FormPanel中添加TextField就可以了，因为只有一行，但是为了一致以及对齐方便我这里还是放到了panel中 layout:'form', border:false, labelWidth:40, labelAlign:'right', items:[ { xtype:'textfield', name:'email', fieldLabel:'住址', anchor:'98%' } ] }); var pnRow5=new Ext.Panel({ layout:'form', border:false, labelWidth:40, labelAlign:'right', items:[ { xtype:'htmleditor', name:'note', fieldLabel:'备注', height:200, anchor:'98%' } ] }); new Ext.FormPanel({ renderTo:"divPanel", title:"个人信息录入", width:600, bodyStyle:'padding:10px', layout:"form", items:[ pnRow1, pnRow2, pnRow3, pnRow4, pnRow5 ] }); });

代码看似比较多，其实很容易理解，Ext有一个特点就是组件的自由组合，那么我们只需要拆分来看就可以了。从大的方面是一个FormPanel，其中有五行内容（这个五个panel当然是使用的父容器FormPanel的默认布局"form"了，所以依次向下放）。先暂且不管第四行和第五行，我们看看其他三行，其实格式基本上是一样的，就是首先这一行放到一个panel中(假设叫做Panel_A)，利用"column"布局来解决多列问题，让后再其Item中我们再再每个column中放一个panel(Panel_B)而这个panel我们使用"form"布局（这个panel中其实都只有一个form控件，所以当然不用form布局也是可以的，之所以用form布局是为了能够使用labelWidth这样的form特有属性），然后在其中放一个form控件，这样也就解决了多列布局的问题。关于第四列和第五列本身就是单列的也没有什么好解释的。上面的方法是通用的，基本上用这种方法所有的复杂表单布局都可以解决了。可能会有人问遇到合并行的怎么办？其实利用上面的方法很容易的，例如假设上面"性别"和"学历"是合并的，那么我们就没有必要用两个panel放两行了，就当做一行，只不过在第一列的Panel_B中放两个form控件就可以了（因为它是form布局，默认就会在两行）。

那么还有没有其他方法呢？答案是肯定的，那就是table布局，个人感觉对于较为规则的多列布局用table还是不错的，不过像上面的例子这样从总体上看是两列的布局，但是有些列里面又是多列我认为用table也是太简单。

总结：

上面说了接种布局，其实简单总结起来border布局一般作为页面整体布局来使用；fit布局适用于那种需要将子类完全占满父类容器的情况；column布局用于多列；form是一种表单特有布局方式，实质是一行一控件的形式；table布局适用多行多列但是有时宽高不太容易控制。而且值得强调的一点就是给一个控件设置layout属性，其实指的是其内部控件的布局方式而不是它本身的布局，这点要搞清楚。