extjs 折叠外部视口中锚定布局面板中的嵌套边框布局面板

qlckcl4x  于 2022-11-23  发布在  其他
关注(0)|答案(1)|浏览(131)

我有一个包含代码的视口

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的边框可见。对我来说有滚动条是很重要的,所以我不能对整个视口使用边框布局。

ht4b089n

ht4b089n1#

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

{
    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/

相关问题