Hide Tab Panels

[Chrissu]

Hello,

I took a form example with a TabPanel inside a FormPanel. Now I want to hide a specific tab (id: 'slip_box_1'), but I always get the error: "slip_box.getItem("slip_box_1").dom has no properties".

BTW, isn't there a better way to show/hide specific tab panels?

Thanks,
Chrissu

    var slip_box = new Ext.TabPanel({
            activeItem:0,
            defaults:{autoHeight:true, bodyStyle:'padding:10px'}, 
            items:[{
                title:'Personal Details',
                id: 'slip_box_1',
                layout:'form',
                defaults: {width: 230},
                defaultType: 'textfield',

                items: [{
                    fieldLabel: 'First Name',
                    name: 'first',
                    allowBlank:false,
                    value: 'Jack'
                },{
                    fieldLabel: 'Last Name',
                    name: 'last',
                    value: 'Slocum'
                },{
                    fieldLabel: 'Company',
                    name: 'company',
                    value: 'Ext JS'
                }, {
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email'
                }]
            },{
                title:'Phone Numbers',
                layout:'form',
                defaults: {width: 230},
                defaultType: 'textfield',

                items: [{
                    fieldLabel: 'Home',
                    name: 'home',
                    value: '(888) 555-1212'
                },{
                    fieldLabel: 'Business',
                    name: 'business'
                },{
                    fieldLabel: 'Mobile',
                    name: 'mobile'
                },{
                    fieldLabel: 'Fax',
                    name: 'fax'
                }]
            }]
        });
        
        
    var slip = new Ext.FormPanel({
        labelWidth: 75,
        border:false,
        width: 350,
        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    });
    
    slip.add(slip_box);

    slip_box.getTabEl('slip_box_1').style.display = 'none';

[Animal]

It's not rendered.

    var slip_box = new Ext.TabPanel({
            activeItem:0,
            defaults:{autoHeight:true, bodyStyle:'padding:10px'}, 
            items:[{
                title:'Personal Details',
                id: 'slip_box_1',
                layout:'form',
                defaults: {width: 230},
                defaultType: 'textfield',

                items: [{
                    fieldLabel: 'First Name',
                    name: 'first',
                    allowBlank:false,
                    value: 'Jack'
                },{
                    fieldLabel: 'Last Name',
                    name: 'last',
                    value: 'Slocum'
                },{
                    fieldLabel: 'Company',
                    name: 'company',
                    value: 'Ext JS'
                }, {
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email'
                }]
            },{
                title:'Phone Numbers',
                layout:'form',
                defaults: {width: 230},
                defaultType: 'textfield',

                items: [{
                    fieldLabel: 'Home',
                    name: 'home',
                    value: '(888) 555-1212'
                },{
                    fieldLabel: 'Business',
                    name: 'business'
                },{
                    fieldLabel: 'Mobile',
                    name: 'mobile'
                },{
                    fieldLabel: 'Fax',
                    name: 'fax'
                }]
            }]
        });
        
        
    var slip = new Ext.FormPanel({
        labelWidth: 75,
        renderTo: document.body,
        border:false,
        width: 350,
        height: 200,
        items: slip_box,
        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    });
    Ext.getCmp('slip_box_1').hide();

[Chrissu]

Thanks for your answer.

Forgot to mention that the FormPanel was rendered to a container "container_slip.add(slip);", but following your suggestion to write "items: slip_box" instead of "slip.add(slip_box)" removed the error. Don't know why...

The content of the tab has disappeared now, but the tab's header is still visible when using hide();

Chrissu

[Animal]

You need to hide the tab element too then.

http://extjs.com/deploy/dev/docs/?cl...emget=getTabEl

But why are you adding a Panel then hiding it? Seems a waste.

[Chrissu]

Thanks again, when adding

    Ext.getCmp('slip_box_1').hide();
    slip_box.getTabEl('slip_box_1').dom.style.display = 'none';

I get the error: A.getItemId is not a function. I was trying getTabEl before but always got this error.

I need this done like that because this is some kind of calculator divided into 4 tabs each shown/hidden upon different criteria. These criteria change quite often and that's why I do not want to create a new tab every time - more likely use the same tab by simply changing it's visibility.

Chrissu

[Animal]

Debug it!

[Chrissu]

I debugged it of course in FireBug, setting one breakpoint at "var slip_box = new Ext.TabPanel" and the second at "slip_box.getTabEl" to verify that everything runs chronological, which it does.

Chrissu

[sseetharaman]

tabs2.hideTabStripItem("tab2");

worked for me. I was looking for a solution to hide the tab and got into this forum. One of the link from this forum helped me to look at this item. The above statement worked for me to hide the tab and to show the same tab, I used the following command

tabs2.unhideTabStripItem("tab2");

[nish1303]

Great solution. Thanks!

[phill54]

sorry - i don't get it.

var mytab = new Ext.Panel({
  id: 'tab-1',
  title: 'Tab 1',
  html: 'Tab 1 Contents'
});
var tabPanel = new Ext.TabPanel({
  id: 'tabPanel',
  region: 'center',
  resizeTabs: true,
  items: [
    mytab
  ]
});
tabPanel.hideTabStripItem('tab-1') // doesn't work
// tabPanel.hideTabStripItem(0); // doesn't work either
// tabPanel.hideTabStripItem(mytab); // doesn't work either

what am i doing wrong?
plz give me a hint