深入浅出ExtJS 第六章 布局
浏览数：209 /
时间：2015年06月09日
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 });
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
