在Ext.Viewport的anchorlayout面板中折叠嵌套的borderlayout面板

Question

我开始学习Ext并坚持这样的问题.我有一个带代码的视口

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)'
    }
]
});

但是具有边框布局的项目会缩小,并且只能看到该块的1px边框.拥有scrollBar对我来说很重要,所以我不能对整个视口使用边框布局.请帮我解决这个问题

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/