Code:
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 :
Code:
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 :
Code:
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.