无法在extjs中保持100%的结构宽度和高度

Question

我是extjs的新手.我想用extjs构建一个页面.

_________________________
| hd ______________________ |
| p1 <| p2 |
| | | - >将是一个视口(将在没有任何
| | |滚动条
| |
| | |
| | |
| ____________ | _______________ |的情况下调整窗口大小.

---

• 高清 - >标题宽度为100

• p1 - >面板1将在西方折叠并且split = true

• p2 - >面板2将占据剩余的位置

我构建了结构,但即使在窗口调整大小时也无法100%维护它

代码链

EditorUi = Ext.extend(Ext.Viewport, {
    layout: 'fit',
    initComponent: function() {
        this.items = [{
            xtype: 'panel',
            title: 'Heading',
            autoHeight: true,
            autoWidth: true,
            layout: 'hbox',
            items: [{
                xtype: 'panel',
                title: 'Navigation',
                collapsible: true,
                region: 'west',
                width: 200,
                split: 'true',
                margins: '3 0 3 3',
                cmargins: '3 3 3 3'
            }, {
                xtype: 'panel',
                title: 'container',
                region: 'center',
                autoHeight: true,
                autoWidth: true,
                split: 'true',
                margins: '3 0 3 3',
                cmargins: '3 3 3 3'
            }]
        }];
        EditorUi.superclass.initComponent.call(this);
    }
});


Ext.onReady(function() {
    new EditorUi();
})

---

我该如何实现呢？

请帮我.

Answer 1

看起来你真正想要的是BorderLayout？此外,当您使用Ext布局时,请不要使用autoHeight - 这意味着"让浏览器根据内容确定高度" - 而不是您想要的.此外,不需要覆盖initComponent只是为了提供默认配置.试试这个(未经测试):

EditorUi = Ext.extend(Ext.Viewport, {
    layout: 'border',
    items: [{
        xtype: 'panel',
        region: 'north',
        height: 100,                
        title: 'Heading',
    },{
        xtype: 'panel',
        title: 'Navigation',
        collapsible: true,
        region:'west',
        width:200,
        split:'true',
        margins:'3 0 3 3',
        cmargins:'3 3 3 3'
    },{
        xtype: 'panel',
        title: 'container',
        region:'center',
        margins:'3 0 3 3',
        cmargins:'3 3 3 3'
    }];
});

Ext.onReady(function(){
    new EditorUi();
});