前端开发中，页面布局是首先要考虑的内容，今天又看了Ext中的局部，小结如下。

布局中最常用的是BorderLayout：此种方式默认将页面划分为5个区域，分别是north、west、center、east、south，其中north和south只能调整height属性，west、east和center只能调整width属性，center是必不可少的部分，其他部分可选。

另外一种布局方式为Accodion（可折叠的、手风琴式）：可参考QQ中分组的形式，一般将此种方式嵌套入其他布局中。

CardLayout可以实现向导式的页面显示，另外一种布局方式，用于控制位置和大小的布局为AnchorLayout和AbsoluteLayout，AnchorLayout可以设定空间所锚定的位置，具体而言是使用anchor：r b这样的格式，其中r表示相对于right一侧，b则表示相对于bottom一侧，可以使用负值，此时表示子组件的大小=整体大小-r(or b)，anchor：-50 -100 表示此组件的右边界距离锚定控件右边界的距离为50px，距离下边界距离为100px。AbsoluteLayout通过指定x、y参数来控制布局。

其他布局方式还有分列式布局和表格状布局，均比较简单。

举个例子，先上效果图

可以很明显看出来大框架使用的是borderLayout，在west部分使用了树形控件，center部分嵌套了一个borderLayout，north部分放置表格，center部分放置表单。

// 表格配置开始    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: '10-05.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:'偶是根'});    tree.setRootNode(root);    root.expand();    // 树形配置结束    // 表单配置开始    var form = new Ext.form.FormPanel({        defaultType: 'textfield',        labelAlign: 'right',        title: 'form',        labelWidth: 50,        frame:true,        width: 220,        title: 'center-center',        region: 'center',        items: [{            fieldLabel: '文本框',            anchor: '90%'        }],        buttons: [{            text: '按钮'        }]    });    // 表单配置结束    // 布局开始    var viewport = new Ext.Viewport({        layout:'border',        items:[{            region: 'north',            contentEl: 'north-div',            height: 80,            bodyStyle: 'background-color:#BBCCEE;'        },{            region: 'south',            contentEl: 'south-div',            height: 20,            bodyStyle: 'background-color:#BBCCEE;'        },tree,{            region: 'center',            split: true,            border: true,            layout: 'border',            items: [grid,form]        }]    });    // 布局结束

应用时参考这个可以完成更复杂的页面布局。

刚准备写，就看到了一篇介绍ExtJS Layout的文章，贴上地址

http://www.cnblogs.com/fsjohnhuang/archive/2013/02/19/2917233.html

相关书籍可参考：《深入浅出Ext JS》