2

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

_________________________
|高清______________________|
| p1 <|p2 |
| | |--> 将是一个视口（将在窗口大小调整时调整大小而没有任何
| | | 滚动条
| | |
| | |
| |
|____________|_______________|

  • HD --> 宽度为 100 的标题

  • p1 -​​-> 面板 1 将在西边折叠并拆分 = 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();
})

我该如何实施？

请帮我。

4

1 回答 1

5

看起来你真正想要的是一个 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();
});
于 2010-04-02T12:31:03.713 回答