PDA

View Full Version : Store's behaving strangely



sencha-dev2
24 Aug 2012, 1:46 AM
Hi, I have a widget that uses a gridpanel, combined to a form.

I'm really sorry, but I hope it can be fixed quickly, cause it totally blocks me on my work and I can't go further...

Here's a screenshot :> :

38222

It has a trouble, cause I try to load in the form the data from the gridpanel's first item. When I do it, it throws an error saying that store's items are undefined. Then why does it display records on the grid ? :-/

When I click on the items, it works well, even if some fields are filled with 'nude' data. It is easy to correct.

Here's the code of the component :


Ext.define('Infologis.view.Composants.FormulaireAdresse', { extend: 'Ext.form.FieldSet',
name: 'coordonneesPostales',
title: '<img src="images/icons/AdressePostale.png" /> Coordonnees Postales',
style: {backgroundColor: '#EFEFEF'},
layout: 'vbox',
alias: 'widget.formulaireAdresse',

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'form',
name: 'coordPostales',
layout: 'vbox',
style: {
backgroundColor: '#EFEFEF'
},
width: 359,
items: [
{
xtype: 'toolbar',
width: 359,
name: 'toolAdresse',
items: [
{
xtype: 'container',
flex: 1
},
{
xtype: 'button',
name: 'ajoutAdresseTiers',
iconCls: 'x-btn-text-icon',
icon: 'images/icons/application_add.png',
text: 'Ajouter'
},
{
xtype: 'button',
name: 'enregistrerAdresseTiers',
iconCls: 'x-btn-text-icon',
icon: 'images/icons/tick.png',
text: 'Valider',
hidden: true
},
{
xtype: 'button',
name: 'annulerAjoutAdresseTiers',
iconCls: 'x-btn-text-icon',
icon: 'images/icons/cancel.png',
text: 'Annuler',
hidden: true
}
]
},
{
xtype: 'fieldcontainer',
name: 'adresseStructure',
layout: 'hbox',
items: [
{
xtype: 'textfield',
name: 'numeroVoie',
emptyText: 'Num.',
fieldLabel: 'Adresse ',
enforceMaxLength: true,
maxLength: "4",
width: 156,
labelWidth: 110,
allowBlank: true
},
{
xtype: 'combobox',
name: 'idComplementNumeroRue',
displayField: 'libelle',
valueField: 'idComplementNumeroRue',
queryMode:'local',
store: 'ComplementNumeroRue',
emptyText: 'Bis, Ter...',
width: 36,
allowBlank: true
},
{
xtype: 'combobox',
name: 'idTypeVoie',
displayField: 'court',
emptyText: 'Rue...',
queryMode:'local',
valueField: 'idTypeVoie',
store: 'TypeVoie',
width: 36,
allowBlank: true
},
{
xtype: 'textfield',
name: 'nomVoie',
emptyText: 'Nom de la voie',
allowBlank: true,
width: 122
}
]
},
{
xtype: 'fieldcontainer',
name: 'complementAdresseStructure',
items: [
{
xtype: 'textfield',
name: 'complementAdresse',
fieldLabel: 'Complement ',
emptyText: 'ZI, Lieu-dit...',
allowBlank: true,
labelWidth: 110,
width: 359
}
]
},
{
xtype: 'fieldcontainer',
name: 'villeStructure',
layout: 'hbox',
items: [
{
xtype: 'textfield',
name: 'codePostal',
maxLength: "5",
enforceMaxLength: true,
fieldLabel: 'Code Postal / Ville ',
labelWidth: 110,
width: 170,
allowBlank: true,
emptyText: 'Code Postal',
enableKeyEvents: true,
regex: /^\d{5}$/,
regexText: 'Un code Postal est composé de 5 chiffres',
listeners: {
keyup: {
fn: function(text) {
var val = text.getValue();
var len = val.length;
var cbo = text.up().down('combobox');
var store = cbo.store;
if(len > 3) {
store.filterBy(function(rec) {
var enr = rec.data.codePostal;
if(val.substring(0, len) == enr.substring(0, len))
return true;
else
return false;
});
}
}
}
}
},
{
xtype: 'combobox',
name: 'idCommune',
queryMode: 'local',
minChars: 2,
displayField: 'nomCommune',
valueField: 'idCommune',
store: 'Commune',
allowBlank: false,
emptyText: 'Ville',
width: 186,
listeners: {
select: {
fn: function(cbo, rec) {
if(typeof(rec[0]) != 'undefined') rec = rec[0];
var codeP = rec.data.codePostal;
cbo.up().down('textfield[name="codePostal"]').setValue(codeP);
}
},
focus: {
fn: function(cbo) {
if(cbo.up().down('textfield').value.length > 3) cbo.expand();
}
}
}
}
]
},
{
xtype: 'textfield',
name: 'cedexAdresse',
allowBlank: true,
labelWidth: 110,
width: 359,
fieldLabel: 'CEDEX ',
emptyText: 'Cedex + numero boite postale',
listeners: {
blur: {
fn: function(text) {
if(text.value != '' && typeof(text.value) != 'undefined')
text.setValue(text.value.toUpperCase());
}
}
}
},
{
xtype: 'textfield',
name: 'pointRemise',
allowBlank: true,
labelWidth: 110,
width: 359,
fieldLabel: 'Point de remise ',
emptyText: 'i.e. Appartement 25... '
},
{
xtype: 'textfield',
name: 'localisationConstruction',
allowBlank: true,
labelWidth: 110,
width: 359,
fieldLabel: 'Localisation de la construction ',
emptyText: 'i.e. Batiment C...'
},
{
xtype: 'datefield',
name: 'dateEffet',
fieldLabel: 'Date d\'effet ',
format: 'd/m/Y',
labelWidth: 110,
width: 359,
allowBlank: false
},
{
xtype: 'checkbox',
name: 'facturation',
inputValue: 'true',
uncheckedValue: 'false',
labelWidth: 110,
fieldLabel: 'Facturation',
labelSeparator: ''
},
{
xtype: 'gridpanel',
name: 'hiddengridATDate',
width: 359,
maxHeight: 300,
overflowY: 'auto',
store: Ext.create('Infologis.store.AdressesTiersParDate'),
columns: {
items: [
{
xtype: 'gridcolumn',
dataIndex: 'nomCommune',
text: 'Commune',
flex: 2
},
{
xtype: 'gridcolumn',
dataIndex: 'codePostal',
text: 'Code Postal'
},
{
xtype: 'datecolumn',
dataIndex: 'dateEffet',
text: 'Date',
format: 'd/m/Y'
},
{
xtype: 'booleancolumn',
dataIndex: 'facturation',
text: 'Facturation',
trueText: 'Oui',
falseText: 'Non'
}
],
defaults: {
flex: 1,
sortable: false,
hideable: false
}
},
listeners: {
afterrender: {
fn: function(grid) {
var store = grid.store;
var tool = grid.up().down('toolbar');
bouton = tool.child('button[name="supprimerAdresseTiers"]');
if (bouton) tool.remove(bouton);
if(store.count() > 1) {
tool.add(
{
xtype: 'button',
name: 'supprimerAdresseTiers',
icon: 'images/icons/application_delete.png',
iconCls: 'x-btn-text-icon',
text: 'Supprimer'
}
);
}
}
},
itemclick: {
fn: function(grid, rec) {
grid.up().up().getForm().setValues(rec.data);
}
}
}
},
{
xtype: 'hidden',
name: 'idAdresse'
},
{
xtype: 'hidden',
name: 'idTiersPourAdresse'
}
]
}
]
});

me.callParent(arguments);
}
});

Here's the code of its controller :


Ext.define('Infologis.controller.ControleAdresse', { extend: 'Ext.app.Controller',

// Les Vues contrôlées
views: [
'Composants.FormulaireAdresse'
],

models: [
'AdressesTiersParDate'
],

stores: [
'AdressesTiersParDate'
],

init: function() {
this.control({
'button[name="ajoutAdresseTiers"]':
{
click: this.preparerFormulaireAjout
},

'button[name="enregistrerAdresseTiers"]':
{
click: this.enregistrerAdresseTiers
},

'button[name="annulerAjoutAdresseTiers"]':
{
click: this.annulationAjout
},

'button[name="supprimerAdresseTiers"]':
{
click: this.supprimerAdresseTiers
}
});
},

preparerFormulaireAjout: function(btn) {
var tool = btn.up();
btn.hide();
bouton = tool.child('button[name="supprimerAdresseTiers"]');
if(tool.isAncestor(bouton)) bouton.hide();
tool.child('button[name="enregistrerAdresseTiers"]').show();
tool.child('button[name="annulerAjoutAdresseTiers"]').show();
var ctn = tool.up();
console.log(ctn);
ctn.child('fieldcontainer[name="adresseStructure"] textfield[name="numeroVoie"]').setValue('');
ctn.child('fieldcontainer[name="adresseStructure"] textfield[name="numeroVoie"]').focus(10, true);
ctn.child('fieldcontainer[name="adresseStructure"] textfield[name="nomVoie"]').setValue('');
ctn.child('fieldcontainer[name="villeStructure"] textfield[name="codePostal"]').setValue('');
ctn.child('fieldcontainer[name="complementAdresseStructure"] textfield[name="complementAdresse"]').setValue('');
ctn.child('textfield[name="cedexAdresse"]').setValue('');
ctn.child('textfield[name="localisationConstruction"]').setValue('');
ctn.child('textfield[name="pointRemise"]').setValue('');
ctn.child('datefield[name="dateEffet"]').setValue(new Date());
ctn.child('fieldcontainer[name="adresseStructure"] combobox[name="idComplementNumeroRue"]').select('');
ctn.child('fieldcontainer[name="adresseStructure"] combobox[name="idTypeVoie"]').select('');
ctn.up().down('hidden[name="idAdresse"]').setValue(-1);
},

enregistrerAdresseTiers: function(btn) {
var form = btn.up().up();
var param = form.getForm().getValues();
var grid = Ext.ComponentQuery.query('fieldset[discrim="adresseECIndividu"] gridpanel[name="hiddengridATDate"]')[0];
var store = grid.store;
if(param.idAdresse == -1)
{
// création
Ext.Ajax.request({
url: 'adressetiers/ajouter-adresse-tiers',
params: param,
method: 'POST',
success: function() {
var tool = btn.up();
btn.hide();

bouton = tool.child('button[name="supprimerAdresseTiers"]');
if(tool.isAncestor(bouton)) bouton.show();

bouton = tool.child('button[name="annulerAjoutAdresseTiers"]');
if(tool.isAncestor(bouton)) bouton.hide();

tool.child('button[name="ajoutAdresseTiers"]').show();

store.load({params: param.idTiersPourAdresse});
var first = store.first();
var rec = first.data;
form.getForm().setValues(rec);

grid.fireEvent('afterrender', grid);

var cbo = form.child('fieldcontainer[name="adresseStructure"] combobox[name="idTypeVoie"]');
var valeur = '';
if(rec.idTypeVoie != 0) valeur = cbo.store.findRecord('idTypeVoie', rec.idTypeVoie);
cbo.select(valeur);

cbo = form.child('fieldcontainer[name="adresseStructure"] combobox[name="idComplementNumeroRue"]');
if(rec.idComplementNumeroRue != 0)
{
valeur = cbo.store.findRecord('idComplementNumeroRue', rec.idComplementNumeroRue);
} else {
valeur = '';
}
cbo.select(valeur);

cbo = form.child('fieldcontainer[name="villeStructure"] combobox[name="idCommune"]');
if(rec.idCommune != 0) {
cbo.fireEvent('select', cbo, first);
cbo.up().down('textfield').fireEvent('keyup', cbo.up().down('textfield'));
valeur = cbo.store.findRecord('idCommune', rec.idCommune);
} else {
valeur = '';
}
cbo.select(valeur);
}
});
}
},

annulationAjout: function(btn) {
var grid = Ext.ComponentQuery.query('fieldset[discrim="adresseECIndividu"] gridpanel[name="hiddengridATDate"]')[0];
var store = grid.store;
var first = store.first();
var rec = store.first().data;
console.log(rec);
var tool = btn.up();
btn.hide();
bouton = tool.child('button[name="supprimerAdresseTiers"]');
if(tool.isAncestor(bouton)) bouton.show();
tool.child('button[name="enregistrerAdresseTiers"]').hide();
tool.child('button[name="ajoutAdresseTiers"]').show();
var form = tool.up();
form.getForm().setValues(rec);
var cbo = form.child('fieldcontainer[name="adresseStructure"] combobox[name="idTypeVoie"]');
var valeur = '';
if(rec.idTypeVoie != 0) valeur = cbo.store.findRecord('idTypeVoie', rec.idTypeVoie);
cbo.select(valeur);
cbo = form.child('fieldcontainer[name="adresseStructure"] combobox[name="idComplementNumeroRue"]');
if(rec.idComplementNumeroRue != 0)
{
valeur = cbo.store.findRecord('idComplementNumeroRue', rec.idComplementNumeroRue);
} else {
valeur = '';
}
cbo.select(valeur);
cbo = form.child('fieldcontainer[name="villeStructure"] combobox[name="idCommune"]');
if(rec.idCommune != 0) {
cbo.fireEvent('select', cbo, first);
cbo.up().down('textfield').fireEvent('keyup', cbo.up().down('textfield'));
valeur = cbo.store.findRecord('idCommune', rec.idCommune);
} else {
valeur = '';
}
cbo.select(valeur);
},

supprimerAdresseTiers: function(btn) {
// nothing here for now
}
});

and here's the function I call from the entire view's controller when I try to do it :


loadEtatCivilOnglet: function() {
var parent= Ext.getCmp('treePrincipal').getSelectionModel().getSelection()[0];
var idBenef= parent.getId().substring(9);
var pan= Ext.widget('panelBeneficiaire');
var centre= pan.child('form[name="centre"]');
var sud = pan.child('container[name="sud"]');

pan.name='EtatCivil';


//Chargement des donn?
Ext.Ajax.request({
url: 'beneficiaire/get-e-c',
timeout: 3000,
method: 'POST',
params:{
'idBenef': idBenef
},
success: function(xhr) {
var res=Ext.JSON.decode(xhr.responseText);
res = res[0];
pan.setTitle('<img src="images/icons/identite.png" /> Etat civil ' + res.nomIndividu + ' ' + res.prenom);
centre.add(
{
xtype: 'container',
items: [
{
xtype: 'formulaireECIndividu'
},
{
xtype: 'formulaireRIB'
}
]
},
{
xtype: 'container',
maxWidth: 50,
flex: 1
},
{
xtype: 'container',
layout: 'vbox',
items: [
{
xtype: 'formulaireAdresse',
discrim: 'adresseECIndividu'
},
{
xtype: 'formulaireTel2',
discrim: 'tableauTelephoneECIndividu'
},
{
xtype: 'formulaireMail'
}
]
}
);
var nord = pan.down('container[name="nord"]');
nord.add(
{
xtype: 'toolbar',
name: 'toolFicheBeneficiaire',
items: [
{
xtype: 'container',
flex: 1
},
{
xtype: 'button',
name: 'enregistrerEC',
text: 'Enregistrer',
iconCls: 'x-btn-text-icon',
icon: 'images/icons/accept.png'
},
{
xtype: 'button',
name: 'annulerEC',
text: 'Annuler',
iconCls: 'x-btn-text-icon',
icon: 'images/icons/cancel.png'
}
]
}
);
centre.getForm().setValues(res);
var grid = Ext.ComponentQuery.query('fieldset[discrim="tableauTelephoneECIndividu"] gridpanel[name="coordTel"]')[0];
grid.store.discrim = "storeTelECIndividu";
grid.store.load({params: res.idTiersPourAdresse});
grid = Ext.ComponentQuery.query('fieldset[discrim="adresseECIndividu"] form[name="coordPostales"] gridpanel[name="hiddengridATDate"]')[0];
grid.store.load({params: res.idTiersPourAdresse});
var cbo = centre.child('container fieldset[name="formulaireECIndividu"] combobox[name="idCivilite"]');
cbo.select(cbo.store.findRecord('idCivilite', res.idCivilite));
cbo = centre.child('container fieldset[name="formulaireECIndividu"] combobox[name="idCommuneNaissance"]');
var rec = cbo.getStore().data.items[cbo.store.findExact('idCommune', res.idCommuneNaissance)];
cbo.select(rec);
cbo.fireEvent('select', cbo, rec);

grid.store.discrim = 'storeHiddenATDate';
console.log(grid.getStore().items);
grid.fireEvent('itemclick', grid.child('gridview'), grid.getStore().items[0].data);

res = centre.getValues();
storeCompEC.add(res);
}
});
Ext.getCmp('centre').add(pan);
}

I hope I gave you all elements that'll help you understanding the problem. :-|

I saw that the reload method is not supported by what I'm pointing on. But the load one works well... And it is really a store.

Please, help. Thanks in advance.

-----------------

PS: Please; forgive the mistakes, I'm French...

carol.ext
24 Aug 2012, 8:19 AM
If I got to the code of interest...



store.load({params: param.idTiersPourAdresse});
var first = store.first();
var rec = first.data;
form.getForm().setValues(rec);

... you did not wait for the store to load before trying to get the first record to load into the form. You would need to do that in a callback from the load call.

Here's a link to the documentation on Store.load (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-method-load)

sencha-dev2
26 Aug 2012, 11:25 PM
Thanks a lot, carol.ext !

I thought it would stop the code until load would be done... Thanks again !