《extjs ui-布局》由会员分享，可在线阅读，更多相关《extjs ui-布局（35页珍藏版）》请在金锄头文库上搜索。
1、ExtJs UI 布局我们先通过一个代码，来看看传统的布局是什么样子的 var viewport = new Ext.Viewport( layout: border, items: region: north, height: 40, html: , region: west, width: 100, html: 菜单1菜单2 , region: center, html: 主要内容 );布局的基本用途常见布局模式 FitLayout BorderLayout Accordion CardLayout FormLayout ColumnLayout TableLayout AnchorLa
2、yout与AbsoluteLayoutFitLayout 我们先将前面用的grid加入的viewport中 ，看看页面变化时，表格是否也能随着 变化 var store = new Ext.data.SimpleStore( fields: id, name, desc, data: 1, name1, desc1, 2, name2, desc2, 3, name3, desc3, 4, name4, desc4, 5, name5, desc5, 6, name6, desc6, 7, name7, desc7, 8, name8, desc8, 9, name9, desc9, 10,
3、name10, desc10 ); var grid = new Ext.grid.GridPanel( title: grid, viewConfig: forceFit: true, store: store, columns: header:id, dataIndex: id, header:名称, dataIndex:name, header:描述, dataIndex:desc , tbar: new Ext.Toolbar(添加,修改,删除), bbar: new Ext.PagingToolbar( pageSize: 15, store: store ) ); var view
4、port = new Ext.Viewport( layout: fit, items: grid ); 注意：使用了layout：fit组件的items只能 放一个组件。即使放多个组件，也只能 显示第一个组件。 items: title: panel, html: panel ,grid 另外，items中的表格切忌不能设置autoHeight:true参数 ，因为这样会是FitLayout失效。它会重新计算表格高 度，最后使得表格无法填充整个页面。 当然，我们也可以把表格移植会window中 var win = new Ext.Window( width: 400, height: 300
5、, layout: fit, items: grid ); win.show(); 因为FitLayout布局每次只能使用一个子 组件，无法胜任比较复杂的布局任务， 所以实际工作中我们使用的最多的是 Borderlayout。它将整个布局分为东、西 南、北、中五个部分。除了中间部分， 其它部分都可以省略。BorderLayoutvar viewport = new Ext.Viewport( layout: border, items: region:north,html:north, region:south,html:south, region:east,html:east, region
6、:west,html:west, region:center,html:center ); 再次提醒，region：center不可或缺，如果没有程序会出错这里面的子区域就是设置north、south、west、east四个区域。不包括中间 部分center，因为中间部分的面积是根据其它部分计算出来的。 其中north、south只能设置高度（height），west、east只能设置宽度（ width）。 var viewport = new Ext.Viewport( layout: border, items: region:north,html:north,height:120, re
7、gion:south,html:south,height:30, region:east,html:east,width:40, region:west,html:west,width:100, region:center,html:center ); 如果，我们在上面代码中，给相关子区 域使用了autoHeight。因为所有原来的 borderlayout中的子组件都是自动延伸， 那么我们刚才设置的各个区域的宽和高 都将失效。Split的使用 使用split就允许用户自行拖动某一个区域的大小。 var viewport = new Ext.Viewport( layout: border,
8、items: region:north,html:north, region:west,html:west,width:100,split:true, region:center,html:center ); 需要注意的是，north、south只能上下拖动，west、east 只能左右拖动。 有的时候，不能完全信任用户的输入，他们的一些动 作会使得页面的布局完全变得混乱，那么我们可以限 制他们的拖动范围 var viewport = new Ext.Viewport( layout: border, items: region:north,html:north, region:west,ht
9、ml:west,width:100, split:true,minSize:80,maxSize:120, region:center,html:center );区域的展开和折叠var viewport = new Ext.Viewport( layout: border, items: region:north,html:north, region:west,html:west,title:west,width:100,collapsible:true, region:center,html:center ); 我们看到设置了collapsible:true，其中west的title参数也
10、要进行设置 ，因为折叠按钮是出现在标题部分的，如果没有为west区域设置 title那么折叠按钮也就无法显示了。实现折叠分组，类似QQ的效果 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 ); Accordion 布局的相关配置都在layoutConfig中，其 中： titleCollapse：默认为true，单据标题就可 以折叠子面板了。 Animate：展开和折叠是是否使用动画效 果 activeOnTop:执行展开和
