Results 1 to 8 of 8

Thread: hiding and showing tabs in a tabpanel

  1. #1
    Ext User
    Join Date
    Jun 2009
    Location
    ernakulam
    Posts
    23

    Default hiding and showing tabs in a tabpanel

    how to hide a tab inside a tabpanel and show it on trigging an event

    thanks in advance

  2. #2
    Sencha User
    Join Date
    Jul 2009
    Location
    The Netherlands
    Posts
    196

    Default

    Code:
    listeners: // tabpanel listeners
                {
                    beforeadd: function(myContainer, myComponent, index)
                    {                                        
                        if(myComponent.title == "test") // tab title = test?
                        {
                            return false; // don't display this tab
                        }
                                        
                    }
                }
    Or just set in the tab properties:

    hidden: true

    Then for the event - let's say a button, in the event:

    Code:
    xtype: 'button',
    text: 'click me',
    handler: function()
    {
         myTab.show(); // didn't test this one, it seems logical to me.
    }

  3. #3
    Ext User
    Join Date
    Jun 2009
    Location
    ernakulam
    Posts
    23

    Default didnt get it

    in my case i have given tabpanel as


    var tabs = new Ext.TabPanel({
    id:'layer_tab',
    height:500,
    width:600,
    renderTo:'layer',
    activeTab: 0,

    items:[
    layerTreeLib,
    selected,
    ],

    listeners: // tabpanel listeners
    {
    beforeadd: function(myContainer, myComponent, index)
    {
    if(myComponent.title == "Layer Manager") // tab title = test?
    {
    return false; // don't display this tab
    }

    }
    }
    });

    where layertreelib and selected are two treepanels

    in my case i should get selected hidden on loading page

    and click a check box in layertreelib selected tab should be shown

  4. #4
    Sencha User
    Join Date
    Jul 2009
    Location
    The Netherlands
    Posts
    196

    Default

    And if you try it like this:

    Code:
    xtype: 'tabpanel',
    items: [
    {
            // this is the first tabpanel
            title: 'Layer Manager',
            layout: 'fit',                
            items: [
            {
                    // here comes your treepanel
            }]
    },
    {
            // your second tabpanel
            id: 'tabSelected',
            title: 'Selected',
            layout: 'fit',
            hidden: true, // don't show at start
            items: [
            {
                     // here comes your second treepanel
            }]
    }]
    And then to show the 'Selected'-tab, in the button event (or whatever event you want):

    Code:
    Ext.getCmp('tabSelected').show();
    O, btw, next time, try to make your code in your post more readable, using the CODE tags.

  5. #5
    Ext User
    Join Date
    Oct 2009
    Location
    Banglaore / Chandigarh
    Posts
    32

    Exclamation I need to make the tab invisible instead of hiding it.

    Well, looks like extJS takes the meaning of 'hide' for a tab as 'not showing that tab's content to the user', but the tab still exists and user can always click on it to view the content.

    What I need is to make the tab invisible until a trigger shows it up again. Can that be done?

    Please tell me the code to make it invisible and visible again. I'm in some serious time constraints here, so I would appreciate if you could also mail me with the reply at [email protected]!

    Thanks a ton in advance! cheers!

  6. #6
    Ext User
    Join Date
    Oct 2008
    Location
    Ger
    Posts
    178

    Default

    what about disabling a tab. the tab is visible, but if u click on it, nothing happens....
    Code:
    Ext.getCmp('item_in_your_tabpanel').setDisabled(false);

  7. #7
    Ext User dommellenny's Avatar
    Join Date
    Oct 2009
    Location
    Geel, Belgium
    Posts
    23

    Default

    if the tab may remain visible but not clickable just use
    Code:
    disabled: true,

  8. #8
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    If you want a tab selector hidden (As opposed to greyed out) when the associated Panel is disabled, change what the class applied to the selector does.

    The class name "x-item-disabled" is added to the selector element.

    You can add CSS rules which mean that when it's a disabled selector element in a tab strip, it's not displayed.

    Code:
    .x-tab-strip li.x-item-disabled {
        display: none;
    }

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •