Question

我正在尝试使用可折叠的标签面板。即使我collapsible: true,

，tabConfig: {collapsible: true}也无效

这是我的代码：

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

    listeners: {
        afterrender: 'userAdmin',
    },

    requires: [
        'Ext.plugin.Viewport',
        'Ext.window.MessageBox',
        'MyProgram.view.main.MainController',
        'MyProgram.view.main.ReportView',
        'MyProgram.view.main.MainModel',
        'MyProgram.store.ProductDetailsStore',
        'MyProgram.widgets.ProfileImage'
    ],
    controller: 'MainController',

    viewModel: {
            type: 'main'
        },

    tabPosition: 'left',
    tabRotation: 0,
    collapsible: true,

    header: {

        title: { text: 'MyProgram' },
        items: [{
            xtype: 'profile-image'
        }]

    },
    defaults: { iconCls: 'fa fa-list-ul' },

    items: [{
        title: '<span style="font-weight: bold;">Form</span>',
        xtype: 'ReportView' //these are the tabs
    }, {
        title: '<span style="font-weight: bold;">Products</span>',
        xtype: 'Blah',
    }]
});

Answer 1

所以我决定在这里作弊......我做的是做了什么

layout: 'border'

然后我没有让标签创建xtype视图，而是添加了一个监听器来隐藏和显示面板。

例如：

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

    listeners: {
        afterrender: 'userAdmin',
    },
    requires: [
        'Ext.plugin.Viewport',
        'Ext.window.MessageBox',
        'MyProgram.view.main.MainController',
        'MyProgram.view.main.ReportView',
        'MyProgram.view.main.MainModel',
        'MyProgram.store.ProductDetailsStore',
        'MyProgram.widgets.ProfileImage'
    ],
    controller: 'MainController',

    viewModel: {
            type: 'main'
        },

    layout: 'border',
    header: {

        title: { text: 'MyProgram' },
        items: [{
            xtype: 'profile-image'
        }]

    },
 items: [{
        //config: { tabBar: {collapseible: true}},
        xtype: 'tabpanel',
        region: 'west',
        tabPosition: 'left',
        tabRotation: 0,
        collapsible: true,
        defaults: { iconCls: 'fa fa-list-ul' },
        items: [{
        title: '<span style="font-weight: bold;">Form</span>',
        listeners: { click: 'menuPress' }
    }, {
        title: '<span style="font-weight: bold;">Blah</span>',
        listeners: { click: 'menuPress' }
    }]
},{ 
 items: [{
            xtype: 'ReportView',
            id: 'report',
            hidden: false
        }, {
            xtype: 'Blah',
            id: 'blah',
            hidden: true
        }]
});

CONTROLLER：

  menuPress: function (objt, b, c) {
        //Views 
        var rpt = Ext.getCmp('report');
        var blh= Ext.getCmp('blah');
        //ternary opperator to check if the views are hidden/shown and will switch them based off button press 
        (objt.title== '<span style="font-weight: bold;">Form</span>' && rpt.hidden == true) ? rpt.show() : rpt.hide();
        (objt.title == <span style="font-weight: bold;">Blah</span> && mgt.hidden == true) ? blh.show() : blh.hide();

    },

可折叠的tab.panel extjs

1 个答案: