extjs布局需要注意的

主要还是说的整体页面布局，一般来说要使整个页面充满布局，最外面使用Ext.container.Viewport。然后在里面使用border布局。如下图

需要注意两点：

1.设置north和south区域时必须设置高度，设置west和east的时候必须设置宽度。如果不设置，布局在某些时候就会乱掉，比如重叠。

2.每个小的区域里面又是一个新的区域，可以从新设置布局，比如上图的大区域中的west，它里面可以又使用border布局。

页面代码如下：

   Ext.create("Ext.container.Viewport", {
                layout: "border",
                items: [{
                    region: "north",
                    title: "north",
                    height: 100
                }, {
                    region: "east",
                    title: "east",
                     100
                }, {
                    region: "west",
                    title: "west",
                     400,
                    layout: "border",
                    items: [{
                        region: "south",
                        title: "south",
                        height: 100
                    }, {
                        region: "east",
                        title: "east",
                         100
                    }, {
                        region: "center",
                        title: "center"
                    }, {
                        region: "north",
                        title: "north",
                        height: 100
                    }]
                }, {
                    region: "center",
                    title: "center"
                }, {
                    region: "south",
                    height: 100,
                    title: "south"
                }]
            });