1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    8
    Vote Rating
    0
    guyuanershi is on a distinguished road

      0  

    Default How to hide tabs in tabpanel?

    How to hide tabs in tabpanel?


    Is there a way to hide tabs in tabpanel? I'v tried some way, but not satisfied yet. the following code can hide the tabpanel and show it back again, but the tab is disappeared....

    any idear?

    thanks,

    Code:
    Ext.define('MainTab', {
        extend: 'Ext.tab.Panel',
        alias: 'widget.maintab',
        plain: true, 
        autoDestroy: false, 
        listeners:{
            remove: {
               fn: function(tp, c){
                      c.hide();
    }}}})
    Code:
    if (!testTab){
        testTab = maintab.add({
              title: 'test',
              closeAction: 'hide',
              closable: true,
              layout: 'fit',
              items:[{xtype:'test'}]});
    } else {
          maintab.add(testTab);
    }

  2. #2
    Sencha User
    Join Date
    Nov 2008
    Posts
    24
    Vote Rating
    0
    manoj123 is on a distinguished road

      0  

    Default


    I did not quite follow your code..but try the following snippet from the docs

    Code:
    tabpanel.child('#home').tab.hide();

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    8
    Vote Rating
    0
    guyuanershi is on a distinguished road

      0  

    Default


    i am trying to overwrite the close action for tab, hide it not close it.....

  4. #4
    Sencha User
    Join Date
    Jun 2011
    Posts
    55
    Vote Rating
    1
    Gabanjo is on a distinguished road

      0  

    Default


    How about something like the code below. The important bit is having a 'beforeclose' listener on the tab and preventing the close while hiding the tab:

    Code:
     {
         xtype : 'tab', title: 'Second  Tab',html: 'The second tab\'s content',
         itemId : 'iidTab2',
         listeners : {
             beforeclose : function(tab) {
                  console.log("hiding second tab:" + tab.id);
                  var tabpanel = tab.up('tabpanel');
                   tabpanel.child('#iidTab2').tab.hide();
                   return false;
             },
       }
    },
    Complete example:

    Code:
    Ext.Loader.setConfig({
        enabled : true,
        paths : {
        }
    });
    Ext.application({
        name: 'hermes',
        appFolder : 'app',
        controllers: [
        ],
        launch : function() {
            Ext.create('Ext.container.Viewport',{
                layout : 'border',
                autoShow : true,
                items : [
                    {
                        xtype: 'tabpanel',
                        region : 'center',
                        autoDestroy : false,
                        items: [
                            {
                                xtype : 'tab',   title: 'First Tab',  html: 'The first tab\'s content',
                                itemId : 'iidTab1',
                            },
                            {
                                xtype : 'tab', title: 'Second  Tab',html: 'The second tab\'s content',
                                itemId : 'iidTab2',
                                listeners : {
                                    beforeclose : function(tab) {
                                        console.log("hiding second tab:" + tab.id);
                                        var tabpanel = tab.up('tabpanel');
                                        tabpanel.child('#iidTab2').tab.hide();
                                        return false;
                                    },
                                }
                            },
                            {
                                xtype : 'tab', title: 'Third Tab', html: 'The third tab\'s content',
                                itemId : 'iidTab3',
                            },
                        ],
                    },
                    {
                       xtype : 'panel',
                        region : 'south',
                       layout : 'hbox',
                        items : [
                            {xtype : 'button', text : 'Show tab 2',handler :function() {
                                var tabpanel = this.up('viewport').down('tabpanel');
                                var item = tabpanel.child('#iidTab2');
                                item.tab.show();
                                tabpanel.setActiveTab(item);
                            },
                             }
                        ]
                    }
                ]
            });
        },
    });

Thread Participants: 2

Tags for this Thread