代码之家 › 专栏 › 技术社区 › TigerDave

可折叠选项卡。面板extjs

collapse tabs extjs

0

TigerDave · 技术社区 · 7 年前

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

1 回复 | 直到 7 年前

1

0

TigerDave 7 年前

所以我决定在这里作弊。。。我所做的是

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

    },