extjs 可折叠选项卡面板扩展

qlvxas9a  于 2022-11-29  发布在  其他
关注(0)|答案(1)|浏览(186)

我正在尝试获得一个可折叠的选项卡面板。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',
    }]
});
yftpprvb

yftpprvb1#

所以我决定在这里作弊一点...我所做的是

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

控制器:

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();

    },

相关问题