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,373
    Vote Rating
    37
    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...
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

  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.