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,483
    Vote Rating
    34
    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,483
    Vote Rating
    34
    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,483
    Vote Rating
    34
    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar