extjs - 在 Ext.Viewport 的 anchor 布局面板中折叠嵌套的边框布局面板

Question

我开始学习 Ext 并遇到了这样的问题。我有一个带代码的视口(viewport)

Ext.define('WIMM.view.Viewport', {
extend: 'Ext.container.Viewport',
autoScroll: true,
layout: 'anchor',
items: [
    {
        border: false,
        title: 'Header',
        layout: 'fit',
        xtype: 'container',
        html: 'Header block. We\'ll try to do this again'
    },{
        layout: 'border',
        items: [
            {
                collapsible: true,
                width: 240,
                title: 'Aside Column',
                region:'west',
                layout: 'fit',
                html: 'Aside widgets (news, balance, budget, goals) would be here.'
            },{
                title: 'Main Block',
                border: false,
                region:'center',
                layout: 'fit',
                html: 'Main block were tabPanel would be nested in.'
            }
        ]
    },{
        title: 'footer',
        xtype: 'container',
        layout: 'fit',
        html: 'Some information in footer (copyrights, disclaimer link)'
    }
]
});

但是带有边框布局的项目会缩小，并且该 block 的边框只有 1px 可见。拥有滚动条对我来说很重要，所以我不能对整个视口(viewport)使用边框布局。请帮我解决这个问题

Answer 1

您必须使用边框布局设置面板的高度。

{
    layout: 'border',
    height: 100,
    items: [
        {
        collapsible: true,
        width: 240,
        title: 'Aside Column',
        region: 'west',
        layout: 'fit',
        html: 'Aside widgets (news, balance, budget, goals) would be here.'},
    {
        title: 'Main Block',
        border: false,
        region: 'center',
        layout: 'fit',
        html: 'Main block were tabPanel would be nested in.'}
    ]
}

看看这个: http://jsfiddle.net/3CabN/4/