Collapsible tab.panel extjs

Question

I am trying to get a collapsible tab panel. collapsible: true, is not working even if I : tabConfig: {collapsible: true}

Here is my 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 I decided to cheat a little bit here... what I did was made

layout: 'border' 

then instead of having the tabs create the xtype view I just added a listener to turn panels hidden and show.

eg:

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

    },