adding dynamic content to tabpanel

[amoz]

I have problems adding dynamic content to existing tabs in a tabpanel via the add() method.

A short sample:

Ext.onReady(function(){
        
    var vp_test = new Ext.Viewport({
        id: 'vp_test',
        items: [{
            xtype: 'tabpanel',
            id: 'tp_test',
            layoutOnTabChange: true,
            activeTab: 0,
            items: [{
                xtype: 'panel',
                id: 'tab1',
                title: 'Tab1',
                items: [{
                    xtype: 'button',
                    text: 'Hier drücken',
                    handler: function( btn){
                        Ext.getCmp( 'tab1').add({
                            html: 'Button gedrückt'
                        });
                        Ext.getCmp( 'tab1').doLayout();
                    }
                }]
            },{
                xtype: 'panel',
                id: 'tab2',
                title: 'Tab2',
                items: [{
                    xtype: 'button',
                    text: 'Hier drücken',
                    handler: function( btn){
                        Ext.getCmp( 'tab2').add({
                            html: 'Button 2 gedrückt'
                        });
                        Ext.getCmp( 'tab2').doLayout();
                    }
                }]
            },{
                xtype: 'panel',
                id: 'tab3',
                title: 'Tab3',
                items: [{
                    xtype: 'button',
                    text: 'Hier drücken',
                    handler: function( btn){
                        Ext.getCmp( 'tab3').add({
                            html: 'Button 3 gedrückt'
                        });
                        Ext.getCmp( 'tab3').doLayout();
                    }
                }]
            }]
        }]
    });
    
}); // Ext.onReady() 

When the panel is rendered I see tab1 and can press button1 - but no additional HTML is shown.
I then select tab2 - when I press its button2 the HTML is inserted into tab2, even repeatedly. The same for tab3.

But: As soon as I switch back from tab2 to tab1 and back to tab2 (or from tab3 to tab2 and back to tab3), button presses do no longer insert the expected HTML markup.

So, tab1 never changes and tab2 and tab3 only the first time they're activated.

This is with Firefox 2.0 - with IE I can never add anything at all

Can somebody shed some light on this?

With regards,
amoz

[tomcheng76]

Try to add "deferredRender:false" to tabpanel's config?

[rudytheng]

well i dont know if it will be usefull for you or not...

try using Ext.DomHelper.append

 var tab1 =Ext.getCmp('tab1'); 
 Ext.DomHelper.append(tab1.body,{tag: 'div',  html: 'Button gedrückt11111'}); 

[jmozdzen]

Rudy,

well i dont know if it will be usefull for you or not...

try using Ext.DomHelper.append

 var tab1 =Ext.getCmp('tab1'); 
 Ext.DomHelper.append(tab1.body,{tag: 'div',  html: 'Button gedrückt11111'}); 

the sample was stripped down to simple HTML to show the effect - we're actually trying to add ExtJS components, which *are* added in JS's object model, but aren't added to the DOM. I believe DomHelper.append() won't help in that case...

To me it looks like ExtJS is losing the link between the ExtJS object and the DOM object.

With regards

Jens

[rudytheng]

how bout this one....

                        var tab1 =Ext.getCmp('tab1');
                        
                        var obj1 = new Ext.BoxComponent({
                            autoEl: {tag:'div', html:'autoEl is cool!'}
                        });
                        tab1.add(obj1);
//                        Ext.DomHelper.append(tab1.body,{tag: 'div',  html: 'Button gedrückt11111'});
                        
//                        var tab1 =Ext.getCmp('tab1'); 
//                        tab1.add({
//                            xtype : 'box',
//                            html : 'Button gedrückt'
//                        });
                        tab1.doLayout();