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