下面看看生成代码：

 代码如下

[Js]
Ext.onReady(function () {
    Ext.create("Ext.container.Viewport", {
        layout: "border",
        items: [{
            region: "north",
            html: "

这里放置logo

",
            xtype: "panel",
            title: "标题",
            autoHeight: true,
            border: false,
            margins: "0 0 5 0"
        }, {
            region: "west",
            collapsible: true,
            title: "左侧导航",
            xtype: "panel",
            width: 200,
            autoScroll: true
        }, {
            region: "center",
            xtype: "tabpanel",
            activeItem: 0,
            items: {
                title: "首页",
                html: "这里是首页正文内容"
            }
        }, {
            region: "south",
            title: "底部",
            collapsible: true,          //允许折叠
            html: "这里放置版权信息",
            split: true,
            height: 100,
            minHeight: 100
        }]
    });

});

效果如下：

extjs4.2_extjs4 布局控件 Ext.container.Viewport

http://m.bbyears.com/wangyezhizuo/33033.html

推荐访问:extjs4api