如何在ExtJs 6中制作带有tabpanel的可折叠侧边栏

Question

我有一个垂直的tabpanel（侧边栏）。每个标签都有一个图标和一个标题。 我想添加一个菜单按钮，使这个面板可折叠。折叠后，您只会看到图标（如本例所示：examples.sencha.com/extjs/6.0.2/examples/admin-dashboard/#dashboard）。

Main.js

Ext.define('MyApp.view.main.Main', {
    extend: 'Ext.tab.Panel',
    xtype:  'app-main',
    id:     'app-main',

    requires: [
        'Ext.plugin.Viewport',
        'Ext.window.MessageBox',
         ...
    ],

    controller: 'main',
    viewModel:  'main',

    ui: 'navigation',

    header: {
        flex:   1,
        height: 30,
        cls:    'main-header',
        layout: {
            type:  'hbox',
            align: 'stretch'
        }
    },

    // sidebar settings
    tabRotation: 0,
    tabPosition: 'left',
    tabBar:      {
        layout: {
            pack: 'center'
        }
    },

    //activeTab: 1,
    items: [
        {
        title:         "tab1",
        xtype:         'tab1x',
        iconCls:       'x-fa fa-file sidebar-tab-icon',
        index:         1
    }
    ...
    ]
});

Answer 1

你必须在js中部分地执行此操作并在css中执行此操作。这是fiddle。