ExtJS3 布局

前端开发中，页面布局是首先要考虑的内容，今天又看了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,
         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,
         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》