ExtJS and FormPanel: re-load doesn't work (going through the same code)

I've got a problem I really can't solve. Here's my goal: I want to add dynamically Tabs to a TabPanel. I've created my own component called EmpruntsTabPanel() And when I create it I just have to give an array and EmpruntsTabPanel() creates count(array)) tabs. This works perfectly. So I've done another component, DossierPanel.

This one, once it is loaded, creates dynamically EmpruntsTabPanel(). This works perfectly. Errr well. This works perfectly the first time it's loaded. I've made a button to re-load DossierPanel (see code below). I call exactly the same code (because it's in the same event), and I've checked: it's the same URL, and the result is the same. So:

1. why does it works the first time, if the reload doesn't ?
2. on the opposite, if it works the first time, why not the second time?

Maybe this has something to do with the code

            var res = action.result;
            var tab = Ext.getCmp('tab_emprunts_'+this.id_dossier);
            tab.removeAll(true);
            tab.add( new EmpruntsTabPanel( res.data.emprunts ) );

Here's my component (I've removed a lot of textfield components for clarity):

DossierPanel = Ext.extend(Ext.form.FormPanel, {
    closable: true,
    autoScroll:true,

    initComponent : function(){
        var n = this.id_dossier;
        this.title = n;
        this.id = 'id_dossier_'+this.id_dossier;
        this.bodyStyle = 'padding:15px';
        this.labelWidth = 150;
        this.items = [{
            xtype:'tabpanel',
            plain:true,
            activeTab: 0,
            /* (!) Pour qu'un onglet qui n'est pas affiché soit
             * quand même calculé, il faut faire :
             * deferredRender: false
             * C'est très important lorsqu'on fait des fiches
             * avec plusieurs onglets.
             */
            deferredRender: false,
            defaults:{bodyStyle:'padding:10px'},
            items:[{
                title:'Détails personnels',
            开发者_StackOverflow社区    layout:'form',
                autoHeight: true,
                defaults: {width: '99%'},
                defaultType: 'textfield',
                items: [{
                    xtype:'datefield',
                    fieldLabel: 'Date premier contact ',
                    name: 'DATE1ERCONTACTJMA',
                    readOnly: true,
                    format:'d/m/Y'
                }]
            },{
                title:'Adresse',
                layout:'form',
                autoHeight: true,
                defaults: {width: '95%'},
                defaultType: 'textfield',
                items: [{
                    fieldLabel: 'Adresse 1 ',
                    name: 'ADRESSE1'
                }]
            },{
                id: 'tab_emprunts_'+this.id_dossier,
                title:'Emprunts',
                layout:'form',
                autoHeight: true,
                defaults: {width: '99%'},
                defaultType: 'textfield',
                items: []
            }]
        }];
        this.buttonAlign = 'left';
        this.buttons = [{
            text: 'Recharger',
            handler: function() {
                this.getForm().load( {
                  url: '/ws/cellulemedicale/jsonEditDossier.php',
                  params: {
                      id_dossier: this.id_dossier
                  },
                  waitTitle: 'Patientez',
                  waitMsg: 'Rafraichissement',
                  failure:function(form, action) {

                  },
                  scope: this
                } );
            },
            scope: this
        }];
        this.on('actioncomplete', function (form,action) {
            if (action.type=='load') {
                if(typeof action.result != 'undefined') {
                    console.log( 'load finished' );
                    console.log( res.data.emprunts );
                    var res = action.result;
                    var tab = Ext.getCmp('tab_emprunts_'+this.id_dossier);
                    tab.removeAll(true);
                    tab.add( new EmpruntsTabPanel( res.data.emprunts ) );
                }
            }
        });

        DossierPanel.superclass.initComponent.call(this);
    }
});

Where is the code that does the initial loading?

console.log( res.data.emprunts ); is before you declare var res = action.result; Is this correct? (You may not be seeing the true result in the log)

At a high level, if something is working as expected on load but not after everything has rendered, I would look at if I need to call form/container .doLayout() after doing the remove / add magic from the form.

Let me know if this helps.