Zusammenklappbar tab.panel extjs

Question

Ich versuche, eine zusammenklappbare Registerkarte zu bekommen. collapsible: true, funktioniert nicht, auch wenn ich: tabConfig: {collapsible: true}

Hier ist mein Code:

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

So entschied ich mich hier ein wenig zu betrügen ... was ich gemacht wurde

tat

layout: 'border' 

dann Anstatt dass die Registerkarten die Ansicht xtype erstellen, habe ich gerade einen Listener hinzugefügt, um die ausgeblendeten und angezeigten Panels zu drehen.

zB:

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

REGLER:

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

    },