ExtJs4.1布局详解

    Ext.QuickTips.init();
    Ext.create(Ext.container.Viewport, {   //一般是渲染到viewport中
        title: "table布局的面板",
        layout:border,
        defaults: {
            collapsible: true,  //可收起
            split: true,
            bodyStyle: padding:15px
        },
        items: [{
            title: 上面north,
            region: north,      //位置
            height: 100
        },{
            title: 下面south,
            region: south,    //位置
            height: 150,
            minSize: 75,
            maxSize: 250
        },{
            title: 左面west,
            region:west,    //位置
            margins: 5 0 0 0,
            width: 175,
            minSize: 100,
            maxSize: 250
        },{
            title: 中间Content,
            collapsible: false,  //不可收起
            region:center,    //位置
            margins: 5 0 0 0
        },{
            title: 右面east,
            width: 175,
            region:east,   //位置
            margins: 5 0 5 5
        }]
    });
})

效果图：

ExtJS 的布局 容器中可以放多个组件，甚至可以放其他容器 布局负责帮助容器，管理其中的组件。 容器中的layout选项（属性）用于控制容器的布局。 1.垂直布局与水平布局