ExtJS, FormPanel, and TabPanel component: post doesn't send all the fields

Here's my problem: as long as the tabs are not shown, the data contained within the tabs are not sent. If I click on a tab, the data is added to the "stack" and is sent through the post event. (See the code) What I don't get is that I'm using "deferredRender: false". This seems it's the only thing to use to "force" field calculation. I don't see what I'm missing, but I'm missing something. Can anyone help me?

Thanks a lot.

Here's the full source code (that works) of the DossierPanel class:

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

    initComponent : function(){
        var n = this.id_dossier;
        if (this.nom) {
            n += ' '+this.nom
        }
        if (this.prenom) {
            n += ' '+this.prenom;
        }
        this.title = n;
        this.id = 'id_dossier_'+this.id_dossier;
        this.bodyStyle = 'padding:15px';
        this.labelWidth = 150;
        this.items = [{
            layout:'column',
            border:false,
            autoHeight: true,
            items:[{
                columnWidth:.5,
                layout: 'form',
                border:false,
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'Civilite ',
                    name: 'CIVILITE',
                    readOnly: true
                }, {
                    xtype:'textfield',
                    fieldLabel: 'Nom ',
                    name: 'NOM',
                    anchor:'95%'
                }, {
                    xtype:'textfield',
                    fieldLabel: 'Prenom ',
                    name: 'PRENOM',
                    anchor:'95%'
                }]
            },{

                columnWidth:.5,
                layout: 'form',
                border:false,
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'RaisonSociale ',
                    name: 'RAISONSOCIALE',
                    anchor:'95%'
                },{
                    xtype:'textfield',
                    fieldLabel: 'Email ',
                    name: 'EMAIL',
                    vtype:'email',
                    anchor:'95%'
                }]
            }]
        },{
            xtype:'tabpanel',
            plain:true,
            activeTab: 0,
            /* (!) For a tab to force calculation, I use
             * deferredRender: false
             * It's very important for Form with multiple Tabs
             */
            deferredRender: false,
            defaults:{bodyStyle:'padding:10px'},
            items:[{
                title:'Détails personnels',
                layout:'form',
                autoHeight: true,
                defaults: {width: '99%'},
                defaultType: 'textfield',

                items: [{
                    fieldLabel: 'Poids ',
                    name: 'POIDS',
                    readOnly: true
                }, {
                    xtype:'datefield',
                    fieldLabel: 'Date premier contact ',
                    name: 'DATE1ERCONTACTJMA',
                    readOnly: true,
                    format:'d/m/Y'
                }, {
                    xtype:'datefield',
                    fieldLabel: 'Date étude dossier ',
                    name: 'DATEDATE_ETUDE_DOSSIERJMA',
                    format:'d/m/Y'
                }]
            },{
                title:'Adresse',
                layout:'form',
                autoHeight: true,
                defaults: {width: '95%'},
                defaultType: 'textfield',
                items: [{
                    fieldLabel: 'Adresse 1 ',开发者_开发百科
                    name: 'ADRESSE1'
                }, {
                    fieldLabel: 'Pays ',
                    name: 'PAYS',
                    readOnly: true
                }]
            },{
                title:'Téléphone(s)',
                layout:'form',
                autoHeight: true,
                defaults: {width: 230},
                defaultType: 'textfield',
                items: [{
                    fieldLabel: 'NoTelephone2 ',
                    name: 'NOTELEPHONE2',
                }, {
                    fieldLabel: 'DescTelephone3 ',
                    name: 'DESCTELEPHONE3',
                    readOnly: true
                }, {
                    fieldLabel: 'NoTelephone3 ',
                    name: 'NOTELEPHONE3',
                }]
            },{
                title:'Divers',
                layout:'form',
                autoHeight: true,
                defaults: {width: 230},
                defaultType: 'textfield',
                items: [{
                    fieldLabel: 'Mot de passe Internet ',
                    name: 'MOTDEPASSE'
                }, {
                    fieldLabel: 'Parts ',
                    name: 'PARTS'
                }, {
                    fieldLabel: 'Commission ',
                    name: 'COMMISSION'
                }]
            },{
                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: 'Wait',
                  waitMsg: 'Refresh',
                  failure:function(form, action) {
                        globGestionErreurAjax(action.response,'Refresh error');
                  }
                });
            },
            scope: this
        },{
            text: 'Sauver',
            handler: function() {
                this.getForm().submit({
                    url: '/ws/cellulemedicale/jsonEditDossier.php',
                    params: {
                        write: 1,
                        id: this.id_dossier
                    },
                    waitTitle: 'Wait...',
                    waitMsg: 'Saving',
                    success: function (form, action) {
                      var b = Ext.util.JSON.decode(action.response.responseText);
                      if (b.success==true) {
                          if (b.msg) {
                              Ext.MessageBox.alert('Done!', b.msg);
                          }
                          else {
                              Ext.MessageBox.alert('Done!', 'Saved ok');
                          }
                      }
                    },
                    failure:function(form, action) {
                        globGestionErreurAjax(action.response,'Save error');
                    }
                });
            },
            scope: this
        }];
        this.on('actioncomplete', function (form,action) {
            if (action.type=='load') {
                console.log(action.result.data.emprunts);
                if(typeof action.result != 'undefined') {
                    if(typeof action.result.data != 'undefined') {
                        if(typeof action.result.data.emprunts != 'undefined') {
                            /* For now, use the id, this may be ugly:
                             */
                            var tab = Ext.getCmp('tab_emprunts_'+this.id_dossier);
                            tab.removeAll(true);
                            var nt = new EmpruntsPanel(action.result.data.emprunts);
                            tab.add(nt);
                        }
                    }

                    }
                }
            }
        });

        DossierPanel.superclass.initComponent.call(this);
        console.log(this.events)
    }
});

how about adding the forceLayout: true config property to each of the tabs or the tabpanel itself?

I'm hoping this would cause the fields to be calculated.

I think you need to include

defaults: { hideMode: 'offsets' }

in your tab panel.

I think u need set is Dirty = true

{ xtype: 'textfield', name: 'name' ,readOnly:true ,submitValue: true ,isDirty: function() { return true;} }