(Ext 基础篇) 布局

分手后的思念是犯贱 2023-10-10 10:34 58阅读 0赞

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

**![1][]**

#### Fit布局 ####

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

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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

效果：

![0_12830104272XZZ.gif][]

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

最常用的边框布局（BoardLayout）

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

**\[c-sharp\]** [ view plain][view plain 1] [copy][view plain 1] [print][view plain 1] [?][view plain 1]

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][]**

**图2 使用BorderLayout的布局**

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

##### 2.1 设置子区域的大小 #####

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

**\[c-sharp\]** [ view plain][view plain 1] [copy][view plain 1] [print][view plain 1] [?][view plain 1]

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][view plain 1] [copy][view plain 1] [print][view plain 1] [?][view plain 1]

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][]**

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

##### 2.3 子区域的展开和折叠 #####

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

**\[c-sharp\]** [ view plain][view plain 1] [copy][view plain 1] [print][view plain 1] [?][view plain 1]

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][]**

**图4 带有折叠效果的布局**

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

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

**\[c-sharp\]** [ view plain][view plain 1] [copy][view plain 1] [print][view plain 1] [?][view plain 1]

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][]**

**图5 使用了Accordion的示例**

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

#### Form布局 ####

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

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

![0_12830104723oG3.gif][]

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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则不需要。

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

![0_1283010487K811.gif][]

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

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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

[1]: https://p-blog.csdn.net/images/p_blog_csdn_net/rocket5725/EntryImages/20090915/1633886220008593750.jpg
[view plain]: http://blog.csdn.net/kenshincui/article/details/5846849#
[0_12830104272XZZ.gif]: http://hi.csdn.net/attachment/201008/28/0_12830104272XZZ.gif
[view plain 1]: http://blog.csdn.net/rocket5725/article/details/4554730#
[2]: https://p-blog.csdn.net/images/p_blog_csdn_net/rocket5725/EntryImages/20090915/2633886220073125000.jpg
[3]: https://p-blog.csdn.net/images/p_blog_csdn_net/rocket5725/EntryImages/20090915/3633886233185937500.jpg
[4]: https://p-blog.csdn.net/images/p_blog_csdn_net/rocket5725/EntryImages/20090915/4633886241732187500.jpg
[5]: https://p-blog.csdn.net/images/p_blog_csdn_net/rocket5725/EntryImages/20090915/5633886250251718750.jpg
[0_12830104723oG3.gif]: http://hi.csdn.net/attachment/201008/28/0_12830104723oG3.gif
[0_1283010487K811.gif]: http://hi.csdn.net/attachment/201008/28/0_1283010487K811.gif