EXTJS UI-布局汇.ppt

我们先通过一个代码，来看看传统的布局是什么样子的 var viewport = new Ext.Viewport({ layout: border, items: [{ region: north, height: 40, html: h1/h1 },{ region: west, width: 100, html: p菜单1/pp菜单2/p },{ 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。它将整个布局分为东、西南、北、中五个部分。除了中间部分，其它部分都可以省略。 var viewport = new Ext.Viewport({ layout: border,