隐藏ExtJS中的tabpanel

Question

Ext.define('rgpd.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: 'border',
    requires: [
        'rgpd.view.Entity1.View',
        'rgpd.view.Entity2.View',
    ],
    items: [{
        xtype: 'tabpanel',
        id: 'tabpanel1',
        region: 'center',
        tabPosition: 'left',
        titleRotation: 0,
        tabRotation: 0,
        padding: 0,
        margin: 0,
        split: true,
        header: {
            layout: {
                align: 'stretchmax'
            },
            title: {
                text: 'MAIN',
                flex: 0
            },
            glyph: 124,
            items: []
        },
        items: [{
                xtype: 'entity1xtype',
                textAlign: 'right',
                flex: 1,
            },
            {
                xtype: 'entity2xtype',
                textAlign: 'right',
                flex: 1,
            },
        ],
    }]
});

我在左侧菜单下方有类似的内容，可让我在不同的视图之间切换。但是有大量的实体，我希望能够用一个按钮或类似的东西包装/解开它。

Answer 1

让您的TabPanel可折叠

只需将此代码添加到TabPanel config

即可

{
    collapsible: true,
    hideCollapseTool: true,
    split:true
}

如果你想让拆分器更小，那么添加这个配置

collapseMode: "mini"