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,498
    Vote Rating
    47
    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,498
    Vote Rating
    47
    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,498
    Vote Rating
    47
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi