Dynamicly Adding Tabs Question

[netnutmike]

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:

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

[arthurakay]

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...

[netnutmike]

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?

[nerdydude81]

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

This maybe causing some heartburn

    autoScroll:true, // shouldn't have the comma 

            closable: true,
            autoScroll:true,
            items: [{
                xtype:'tabpanel',
                activeTab:0,
                items:[{ 

should be more like

            closable: true,
            autoScroll:true,
            xtype:'tabpanel',
            activeTab:0,
            items: [{ 

here's an example of what I think your trying to do.

Ext.onReady(function(){
    var pnl = new Ext.TabPanel({
        frame: false
    });
    var btnAdd = new Ext.Toolbar.Button({
        text: 'Add'
        , scope: this
        , handler: function(obj){
            var id = Ext.id();            
            pnl.add({
                title: 'Name',
                id: id,
                closable: true,
                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'
        , width: 600
        , height: 400
        , items: pnl
        , tbar: [
            btnAdd
        ]
    });
    win.show();
}); 

[netnutmike]

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!

[netnutmike]

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.

[nerdydude81]

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

[devnull]

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