1. #1
    Sencha User
    Join Date
    Jun 2008
    Posts
    80
    Vote Rating
    0
    netnutmike is on a distinguished road

      0  

    Default Dynamicly Adding Tabs Question

    Dynamicly Adding Tabs Question


    I am tying to dynamically add a tab and include another tabpanel inside of that tab. When using the add method can you not add items at that time? All I get is a blank new tab. I have simplified it to just test it and get it working but still no joy. Below is the piece of code I am trying to get working:

    Code:
            proptab.add({
                title: record.get('Name'),
                closable: true,
                autoScroll:true,
                items: [{
                    xtype:'tabpanel',
                    activeTab:0,
                    items:[{
                        title:'Device Details',
                        html: 'Device Details',
                        autoScroll:true,
                    }, {
                        title:'Router Configs',
                        html: 'Router Config',
                        autoScroll:true
                    }]
                }]
            }).show();

  2. #2
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,398
    Vote Rating
    45
    arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough

      0  

    Default


    Total guess here... but one of your two items has an extra comma at the end of autoScroll (the first one "Device Details").

    That may fix it...

  3. #3
    Sencha User
    Join Date
    Jun 2008
    Posts
    80
    Vote Rating
    0
    netnutmike is on a distinguished road

      0  

    Default


    nope that did not help any. But thanks.... I did delete the line after that (Was a contentE1) and put in th ehtml to simplify it.

    This should work though? Right?

  4. #4
    Ext User
    Join Date
    Jul 2008
    Posts
    41
    Vote Rating
    0
    nerdydude81 is on a distinguished road

      0  

    Default


    You shouldn't have to call the show function when you're adding components to other components.

    This maybe causing some heartburn
    PHP Code:
        autoScroll:true// shouldn't have the comma 
    PHP Code:
                closabletrue,
                
    autoScroll:true,
                
    items: [{
                    
    xtype:'tabpanel',
                    
    activeTab:0,
                    
    items:[{ 
    should be more like

    PHP Code:
                closabletrue,
                
    autoScroll:true,
                
    xtype:'tabpanel',
                
    activeTab:0,
                
    items: [{ 
    here's an example of what I think your trying to do.

    PHP Code:
    Ext.onReady(function(){
        var 
    pnl = new Ext.TabPanel({
            
    framefalse
        
    });
        var 
    btnAdd = new Ext.Toolbar.Button({
            
    text'Add'
            
    scopethis
            
    handler: function(obj){
                var 
    id Ext.id();            
                
    pnl.add({
                    
    title'Name',
                    
    idid,
                    
    closabletrue,
                    
    autoScroll:true,
                    
    xtype:'tabpanel',
                    
    activeTab:0,
                    
    items: [{
                            
    title:'Device Details',
                            
    html'Device Details',
                            
    autoScroll:true
                        
    }, {
                            
    title:'Router Configs',
                            
    html'Router Config',
                            
    autoScroll:true
                    
    }]
                });
                
                
    pnl.setActiveTab(id);
            }
        });
        
        var 
    win = new Ext.Window({
            
    title'Tab Test'
            
    layout'fit'
            
    width600
            
    height400
            
    itemspnl
            
    tbar: [
                
    btnAdd
            
    ]
        });
        
    win.show();
    }); 

  5. #5
    Sencha User
    Join Date
    Jun 2008
    Posts
    80
    Vote Rating
    0
    netnutmike is on a distinguished road

      0  

    Default


    yes, that did it. I was not thinking that I needed to set the xtype of the first level. Makes so much sense now.

    Thanks!

  6. #6
    Sencha User
    Join Date
    Jun 2008
    Posts
    80
    Vote Rating
    0
    netnutmike is on a distinguished road

      0  

    Default


    I spoke a little too soon though. I added back in the form that I wanted to put in the tab. In autowidth the fields are very wide and I do not see the 2nd column. However, if I Set the width of the formpanel everything looks fine.

    Not sure what is causing that.

  7. #7
    Ext User
    Join Date
    Jul 2008
    Posts
    41
    Vote Rating
    0
    nerdydude81 is on a distinguished road

      0  

    Default


    I'm a little lost here. Can you post some code? Were is this form?

  8. #8
    Ext User
    Join Date
    Jul 2007
    Posts
    3,128
    Vote Rating
    1
    devnull is an unknown quantity at this point

      0  

    Default


    if you have form fields in one of your tabs, be sure to add 'layoutOnTabChange: true' to the tabPanel config.