Hybrid View

  1. #1
    Ext User
    Join Date
    Jun 2008
    Posts
    17
    Vote Rating
    0
    Chrissu is on a distinguished road

      0  

    Default Hide Tab Panels

    Hide Tab Panels


    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


    HTML Code:
        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';

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    It's not rendered.

    Code:
        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();

  3. #3
    Ext User
    Join Date
    Jun 2008
    Posts
    17
    Vote Rating
    0
    Chrissu is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

  5. #5
    Ext User
    Join Date
    Jun 2008
    Posts
    17
    Vote Rating
    0
    Chrissu is on a distinguished road

      0  

    Default


    Thanks again, when adding

    HTML Code:
        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

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Debug it!

  7. #7
    Ext User
    Join Date
    Jun 2008
    Posts
    17
    Vote Rating
    0
    Chrissu is on a distinguished road

      0  

    Default


    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