EXTJS UI-布局.ppt

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 anchorlayout与absolutelayout,fitlayout,我们先将前面用的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, 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 viewport = 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, layout: fit, items: grid ); win.show();,因为fitlayout布局每次只能使用一个子组件，无法胜任比较复杂的布局任务，所以实际工作中我们使用的最多的是borderlayout。它将整个布局分为东、西南、北、中五个部分。除了中间部分，其它部分都可以省略。,borderlayout,var viewport = 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 ); 再次提醒，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, region: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, 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,html: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参数也要进行设置，因为折叠按钮是出现在标题部分的，如果没有为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:执行展开和折叠操作后，子面板的顺序是否会改变,cardlayout 可以看做事一叠的卡片，每次只能看到一张卡片。 var navhandler = function(direction) var wizard = ext.getcmp(wizard).layout; var prev = ext.getcmp(move-prev); var next = ext.getcmp(move-next); var activeid = wizard.activeitem.id; if (activeid = card-0) if (direction = 1) wizard.setactiveitem(1); prev.setdisabled(false); else if (activeid = card-1) if (direction = -1) wizard.setactiveitem(0); prev.setdisabled(true); else wizard.setactiveitem(2); next.setdisabled(true); else if (activeid = card-2) if (direction = -1) wizard.setactiveitem(1); next.setdisabled(false); ;,cardlayout,var viewport = new ext.viewport( layout:border, items: region: west, id: wizard, width: 200, title: 某某向导, layout:card, activeitem: 0, bodystyle: padding:15px, defaults: border:false , bbar: id: move-prev, text: 上一步, handler: navhandler.createdelegate(this, -1), disabled: true , -, id: move-next, text: 下一步, handler: navhandler.createdelegate(this, 1) , items: id: card-0, html: 哈哈！欢迎用咱的向导。第一步，一共三步 , id: card-1, html: 第二步，一共三步 , id: card-2, html: 恭喜恭喜，完成了。第三步，一共三步，最后一步了。 , region: center, split: true, border: true );,控制位置和大小的布局,anchorlayout 提供了灵活的布局方式 第一种使用百分比进行配置 var viewport = new ext.viewport( layout:anchor, items: title: panel 1, html: panel 1, anchor: 50% 50% , title: panel 2, html: panel 2, anchor: 80% );,第二种，直接配置与右侧和底部的边距。 var viewport = new ext.viewport( layout:anchor, items: title: panel 1, html: panel 1, anchor: -50 -200/右侧、底部的距离 , title: panel 2, html: panel 2, anchor: -100 );,第三种：side,使用它的前提是作为布局的整体的父组件和布局内部的子组件都设置好了width、height和anchorsize属性。 var viewport = new ext.viewport( layout:anchor, anchorsize: width:400,height:300, items: title: panel 1, html: panel 1, width: 200, height: 100, anchor: r b , title: panel 2, html: panel 2, width: 100, height: 200, anchor: r b );,anchorlayout组合配置,var viewport = new ext.viewport( layout:anchor, items: title: panel 1, html: panel 1, anchor: -100 40% , title: panel 2, html: panel 2, anchor: -200 60% );,absolutelayout,anchorlayout布局中的子组件都是自上而下排列的，我们不能控制每个组件的位置。absolutelayout通过绝对定位，来为我们解决这些问题。 var viewport = new ext.viewport( layout:absolute, items: title: panel 1, html: panel 1, x: 50, y: 0, anchor: -200 40% , title: panel 2, html: panel 2, x: 200, y: 10, anchor: -50 60% );,formlayout,其实formlayout也是anchorlayout的一个子类，可以在它里面使用anchor设置的宽、高的比例。不过，它主要还是对表单进行布局。我们前面讲过的formpanel使用它作为默认的布局方式，,var viewport = new ext.viewport( layout:fit, items: xtype: form, title: 信息, labelalign: right, labelwidth: 50, frame: true, defaulttype: textfield, items: fieldlabel: 名称, name: name, anchor: 90% , fieldlabel: 生日, name: birthday, xtype: datefield, anchor: 90% , fieldlabel: 备注, name: desc, xtype: textarea, anchor: 90% -100 );,分列式布局columnlayout,var viewport = new ext.viewport( layout:column, items: title: column 1, columnwidth: .25 , title: column 2, columnwidth: .4 , title: column 3, columnwidth: .35 );,var viewport = new ext.viewport( layout:column, items: title: column 1, width: 120 , title: column 2, columnwidth: .7 , title: column 3, columnwidth: .3 ); 使用columnwidth来平分剩余部分的宽度,tablelayout,var viewport = new ext.viewport( layout:fit, items: title: table layout, layout:table, defaults: bodystyle:padding:20px , layoutconfig: columns: 3 , items: html: cell a content, rowspan: 2 , html: cell b content, colspan: 2 , html: cell c content , html: cell d content );,使用viewport对整个页面布局,var viewport = new ext.viewport( layout: border, items: region: north, height: 40, html: , region: west, width: 100, html: 菜单1菜单2 , region: center, xtype: viewport, html: 主要内容 ); 通过这个代码，我们发现viewport的冲突问题，在外部已经使用了viewport而在内部又定义了viewport，造成两者出现冲突，布局失败。,实现复杂布局,/ 表格配置开始 var cm = new ext.grid.columnmodel( header:编号,dataindex:id, header:名称,dataindex:name, header:描述,dataindex:descn ); var data = 1,name1,descn1, 2,name2,descn2, 3,name3,descn3, 4,name4,descn4, 5,name5,descn5 ; var ds = new ext.data.store( proxy: new ext.data.memoryproxy(data), reader: new ext.data.arrayreader(, name: id, name: name, name: descn ) ); ds.load(); var grid = new ext.grid.gridpanel( ds: ds, cm: cm, title: center-north, region: north ); / 表格配置结束,/ 树形配置开始 var tree = new ext.tree.treepanel( loader: new ext.tree.treeloader(dataurl: tree.txt), title: west, region: west, split: true, border: true, collapsible: true, width: 120, minsize: 80, maxsize: 200 ); var root = new ext.tree.asynctreenode(text:偶是根); t