접을 수있는 탭. 패널 확장자

Question

접을 수있는 탭 패널을 가져 오려고합니다. 그때

layout: 'border' 

을 하였다 무슨 짓을했는지 ...

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

그래서 내가 여기에 약간의 속임수로 결정 : 여기

tabConfig: {collapsible: true} 내 코드입니다 : collapsible: true, 나는 경우에도 작동하지 않습니다 탭 대신 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(); 

    },