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.