深入浅出ExtJS 第六章 布局

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