1 6.1 布局的用途
2 //决定把什么东西放到什么位置;
3 var vieport = new Ext.Viewport({
4 layout:‘border‘, //使用BorderLayout的布局方式(边界布局);可以自动检测浏览器的大小变化和自动调整布局中每个部分的大小;
5 items:[{
6 region:‘north‘, //指定组件的具体位置;
7 height:40,
8 html:‘<h1>顶部</h1>‘
9 },{
10 region:‘west‘,
11 width:100,
12 html:‘<p>左侧区域</p>‘
13 },{
14 region:‘center‘,
15 html:‘主要内容‘
16 }]
17 });
18 //Ext的所有布局都是从Ext.Container开始的,Ext.Container的父类是Ext.BoxComponent;
19 //Ext.BoxComponent是一个盒子组件,可以定义宽度/高度和位置等;
20
21 //Ext.Container及其子类
22 >.Ext.Container //Ext.Container的子类都可以用layout对内部的items进行布局;
23 >.Ext.Viewport //页面整体布局;
24 >.Ext.Panel //嵌套布局;
25 >.Ext.TabPanel
26 >.Ext.Tip
27 >.Ext.Window //嵌套布局;
28 >.Ext.form.FieldSet //表单布局;
29 >.Ext.form.FormPanel //表单布局;
30 >.Ext.tree.TreePanel
31 >.Ext.grid.GridPanel
32 >.Ext.grid.EditorGridPanel
33 >.Ext.grid.PropertyGrid
34
35 //所有布局类也有一个共同的超类Ext.layout.ContainerLayout
36 //凡是该超类的子类都可以对Ext.Container及其子类进行布局定义;
37 >.Ext.layout.ContainerLayout //容器布局
38 >.Ext.layout.AnchorLayout //锚点布局
39 >.Ext.layout.AbsoluteLayout //绝对定位布局
40 >.Ext.layout.FormLayout //表单布局
41 >.Ext.layout.BorderLayout //边框布局
42 >.Ext.layout.ColumnLayout //分列布局
43 >.Ext.layout.FitLayout //自适应布局
44 >.Ext.layout.Accordion //折叠布局
45 >.Ext.layout.CardLayout //卡片布局
46 >.Ext.layout.TableLayout //表格布局
47
48 6.2 最简单的布局--FitLayout
49 //自动适应页面大小
50 Ext.onReady(function(){
51 var store = new Ext.data.ArrayStore({
52 fields:[‘id‘,‘name‘,‘desc‘],
53 data:[[‘1‘,‘name1‘,‘desc1‘]] //数据存储器;
54 });
55
56 var grid = new Ext.grid.GridPanel({ //创建带数据的表格;
57 title:‘grid‘,
58 viewConfig:{forceFit:true},
59 store:store,
60 columns:[
61 {header:‘id‘,dataIndex:‘id‘},
62 {header:‘名称‘,dataIndex:‘name‘},
63 {header:‘描述‘,dataIndex:‘desc‘}
64 ],
65 tbar:new Ext.Toolbar([‘添加‘,‘修改‘,‘删除‘]),
66 bbar:new Ext.PagingToolbar({
67 pageSize:15,
68 store:store
69 })
70 });
71
72 var viewport = new Ext.Viewport({
73 layout:‘fit‘, //指向自适应布局;
74 items:[grid] //将表格引入布局;
75 });
76 });
77
78 6.3 常用的边框布局--BorderLayout
79 //FitLayout每次只能使用一个子组件;而现实中我们使用最多的是Ext.layout.BorderLayout布局;
80 var viewport = new Ext.Viewport({
81 layout:‘border‘, //指向为BorderLayout布局;
82 items:[
83 {region:‘north‘,html:‘north‘,height:120}, //region:指定组件的位置;html:组件内容;
84 {region:‘south‘,html:‘south‘,height:30},
85 {region:‘west‘,html:‘west‘,width:40},
86 {region:‘east‘,html:‘east‘,width:100},
87 {region:‘center‘,html:‘center‘} //center的大小是其他4个部分设置好之后计算出来的;不可以省略;
88 ]
89 });
90
91 6.3.1 设置子区域的大小
92 //可以直接设置north与south的高度和west与east的宽度;
93
94 6.3.2 使用split并限制它的的范围
95 //使用split参数,用户可以自行拖放来改变某一个区域的大小;
96 //使用minSize和maxSize将限制用户拖放的范围;
97 var viewport = new Ext.Viewport({
98 layout:‘border‘,
99 items:[
100 {region:‘north‘,html:‘north‘,split:true}, //顶部可以上下拖动改变大小;
101 {region:‘west‘,html:‘west‘,width:100,split:true,minSize:80,maxSize:120},
102 //左侧可以左右拖动改变大小; 但宽度的范围在80~120之间;
103 {region:‘center‘,html:‘center‘}
104 ]
105 });
106
107 6.3.3 子区域的展开和折叠--collapsible
108 //属性collapsible:true;这个属性激活了区域折叠功能;
109 //title:‘west‘;折叠区域的标题;必须跟collapsible一起设置;
110 items:[
111 {region:‘north‘,html:‘north‘,heith:100,title:‘顶部‘,collapsible:true},
112 ...
113 ]
114
115 6.4 制作伸缩菜单布局--Accordion(折叠布局)
116 //BorderLayout布局下嵌套的Accordion布局;
117 var viewport = new Ext.Viewport({
118 layout:‘border‘, //第一层是BorderLayout布局;
119 items:[{
120 region:‘west‘, //子组件左侧区域;
121 width:200,
122 layout:‘accordion‘, //子组件是Accordion(折叠)布局;
123 split:true,
124 layoutConfig:{ //布局配置信息;
125 titleCollapse:true, //点击标题也可折叠;
126 animate:true, //折叠动画;
127 activeOnTop:false //打开的组件是否置顶;
128 },
129 items:[{ //孙组件;折叠布局;
130 title:‘第一栏‘,
131 html:‘第一栏‘
132 },{
133 title:‘第二栏‘,
134 html:‘第二栏‘
135 }]
136 },{
137 region:‘center‘, //子组件center区域;
138 html:‘center区域‘
139 }]
140 });
141
142 6.5 实现操作向导的布局--CardLayout
143 //为CardLayout配置几个子面板,每次只显示其中一个;
144 var viewport = new Ext.Viewport({
145 layout:‘border‘,
146 items:[{
147 region:‘west‘,
148 id:‘wizard‘,
149 width:200,
150 title:‘xx向导‘,
151 layout:‘card‘,
152 activeItem:0,
153 bodyStyle:‘padding:15px‘,
154 defaults:{
155 border:false
156 },
157 bbar:[{
158 id:‘move-prev‘,
159 text:‘上一步‘,
160 handler:function(){
161 navHandler(-1);
162 },
163 disabled:true
164 },‘->‘,{
165 id:‘move-next‘,
166 text:‘下一步‘,
167 handler:function(){
168 navHandler(1);
169 },
170 }],
171 items:[{
172 id:‘card-0‘,
173 html:‘<h1>欢迎使用向导</h1><p>1/3</p>‘
174 },{
175 id:‘card-1‘,
176 html:‘<p>2/3</p>‘
177 },{
178 id:‘card-2‘,
179 html:‘<p>完成</p>‘
180 }]
181 },{
182 region:‘center‘,
183 split:true,
184 border:true
185 }]
186 });
187 //设置navHandler函数 (带注释!)
188 var navHandler = function(direction){
189 var wizard = Ext.getCmp(‘wizard‘).layout;
190 var prev = Ext.getCmp(‘move-prev‘);
191 var next = Ext.getCmp(‘move-next‘);
192 var activedId = wizard.activeItem.id;
193 if(activeId == ‘card-0‘){
194 if(direction == 1){
195 wizard.setActiveItem(1);
196 prev.setDisabled(false);
197 }
198 }else if(activeId == ‘card-1‘){
199 if(direction == -1){
200 wizard.setActiveItem(0);
201 prev.setDisabled(true);
202 }else{
203 wizard.setActiveItem(2);
204 next.setDisabled(true);
205 }
206 }else if(activeId == ‘card-2‘){
207 if(direction == -1){
208 wizard.setActiveItem(1);
209 next.setDisabled(false);
210 }
211 }
212 };
213
214 6.6 控制位置和大小的布局--AnchorLayout和AbsolluteLayout
215 //AnchorLayout提供了灵活的布局方式,既可以为items中的每个组件指定与总体布局大小的差值;也可以设置一个比例使子组件可以根据整体自行计算本身的大小;
216 >1.使用百分比进行配置
217 //设置某一个子组件占整体长和宽的百分比;
218 var viewport = new Ext.Viewport({
219 layout:‘anchor‘, //设置接下来的子组件都为AnchorLayout布局;
220 items:[{
221 title:‘panel1‘,
222 html:‘panel1‘,
223 anchor:‘50% 50%‘ //panel1组件占总体宽度的50%和高度的50%;
224 },{
225 title:‘panel2‘,
226 html:‘panel2‘,
227 anchor:‘80%‘ //panel2组件占总体宽度的80%,高度自适应;
228 }]
229 });
230 >2.设置与右侧和底部的边距;
231 var viewport = new Ext.Viewport({
232 layout:‘anchor‘,
233 items:[{
234 title:‘panel1‘,
235 html:‘panel1‘,
236 anchor:‘-50 -200‘ //组件与右侧和底部的相对(绝对)距离;
237 },{
238 title:‘panel2‘,
239 html:‘panel2‘,
240 anchor:‘-100‘ //组件与右侧的距离;
241 }]
242 });
243 >3.side布局;
244 //在设置父组件和布局内部子组件都设置好width/height和anchorSize属性的前提下;AnchorLayout会记录布局整体与子组件在大小上的差值,为以后调整布局提供依据;
245 var viewport = new Ext.Viewport({
246 layout:‘anchor‘,
247 anchorSize:{width:400,height:300},
248 //这是一个包含宽度和高度信息的JSON对象;以此作为以后计算差值的基准;
249 items:[{
250 title:‘panel1‘,
251 html:‘panel1‘,
252 width:200,
253 height:100,
254 anchor:‘r b‘
255 },{
256 title:‘panel2‘,
257 html:‘panel2‘,
258 width:100,
259 height:200,
260 anchor:‘r b‘
261 }]
262 });
263 //AnchorLayout首先获得父组件的宽度/高度,以及每个子组件的宽度/高度,然后将子组件与父组件的宽度/高度之差分别保存起来;根据改变后父组件的大小,计算出子组件当前的宽度和高度;
264 >4.同时使用百分比和边距
265 var viewport = new Ext.Viewport({
266 layout:‘anchor‘,
267 items:[{
268 title:‘panel1‘,
269 html:‘panel1‘,
270 anchor:‘-100 40%‘ //组件距右侧100px不变,高度是整体的40%;
271 },{
272 title:‘panel2‘,
273 html:‘panel2‘,
274 anchor:‘-200 60%‘ //同上;
275 }]
276 });
277 >5.利用AbsoluteLayout进行绝对定位
278 //AbsoluteLayout是AnchorLayout的一个子类;继承了AnchorLayout的所有特性;
279 //AnchorLayout布局下的子组件都是自上而下竖直排列的;而AbsoluteLayout正是可以解决这个问题;
280 var viewport = new Ext.Viewport({
281 layout:‘absolute‘,
282 //以下组件进行绝对定位;并使用AnchorLayout确定每个组件的相对大小;
283 items:[{
284 title:‘panel1‘,
285 html:‘panel1‘,
286 x:50, //子组件左上角距父组件的距离;
287 y:0,
288 anchor:‘-200 40%‘ //子组件相对于父组件的大小;
289 }]
290 });
时间： 2024-08-04 18:22:44