Tabpanel not display the correct fields

[riquier.mairesse@free.fr]

Hi,

I have a tabpanel with dynamic panels attached to each tab of the tabpanel. Dynamic panel are attached related to information in a list. Each time I modified a row in the list, I display the tappanel with the right tabs. To do that here is the code I'm using to remove previous panel in the tabpanel and the code I'm used to attach new panels in tabpanel :

var Selection = Ext.getCmp("PartnerList").getSelectionModel().getSelections();
                if(Selection.length == 1) {
                
                    // Remove existing tabs
                    partnerTabPanel.items.each(function(item) {
                        partnerTabPanel.removeAll(false);
                        console.log('remove tabpartner: '+item.id);
                         item.cascade(function(item) {
                            item.remove();
                            console.log('component: '+item.id);
                            comp = Ext.getCmp(item.id);
                            comp.removeAll(false); 
                        }) 
                    });
                
                    // Create new tabs
                    var syntaxPanel = Ext.getCmp('partner' + Selection[0].get('SYNTAX') + 'Id');
                    console.log('syntax Panel Id : ' + syntaxPanel);
                    if(!syntaxPanel) { 
                        partnerTabPanel.add('partner' + Selection[0].get('SYNTAX') + 'Id');
                    }
                    partnerTabPanel.add('partner' + Selection[0].get('TMECH') + 'Id');
                    partnerTabPanel.add('partnerRetryId');
                    partnerTabPanel.setActiveTab(0);     
                    partnerTabPanel.doLayout();
                    partnerItem.setTitle('Trading Partner ' + Selection[0].get('NAME'));
                
                    // Load data
                    partnerItem.getForm().load({
                        url:'partner_read_db.php',
                        params:{action:'readitem',table:'partner',id:Selection[0].get('TX_INDEX')},
                        success : function(form,action) { eP.expand();},
                        failure : function(form,action) { PartnerItemAnswer(action);}
                    }); 

Here is my definition of some of panels and my tabpanel definition.

var partnerEmailPanel = new Ext.Panel ({
    id: 'partnerEMAILId',
    title: 'Email',
    labelWidth: 150,
    defaultType: 'textfield',
    layout: 'form',
    bodyStyle:'padding:10px 10px 10px 10px',
    items: [
        { fieldLabel: 'Email field',    name: 'email:XXXX',    allowBlank:true}
    ]
});
var partnerAnsiX12Panel = new Ext.Panel ({
    id: 'partnerANSIX12Id',
    title: 'AnsiX12',
    labelWidth: 150,
    defaultType: 'textfield',
    layout: 'form',
    bodyStyle:'padding:10px 10px 10px 10px',
    items: [
        { fieldLabel: 'ansiX12 field',    name: 'ansi:XXXX',    allowBlank:true}
    ]
});

var partnerTabPanel = new Ext.TabPanel({
    activeTab : 0,
    id : 'partnerTabPanel',
    bodyStyle:'padding:10px 10px 10px 10px',
    defaults:{ autoScroll:true},
    animScroll: true,
    autoScroll: true, 
    layoutOnTabChange: true,
    width:500,
    height:500
}); 

The first time everything is working well, panel are display correctly in my tabpanel. I can switch from one to another without issue. But after that, when I select a new row in my list, tabpanel becomes mad, it displays wrong panel in wrong tab. I don't understand why. Can somebody can help me, I really not understand why that's not working especially because that's works the first time.

Thanks you
Riquier