Code:
Ext.define('Infologis.view.Composants.FormulaireAdresse', {
extend: 'Ext.form.FieldSet',
name: 'coordonneesPostales',
title: 'Coordonnees Postales',
style: {backgroundColor: '#EFEFEF'},
layout: 'vbox',
padding: 5,
alias: 'widget.formulaireAdresse',
height: 250,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'container',
style: {
backgroundImage: 'url(images/icons/AdressePostale.png)',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center top'
},
width: 80,
height: 20
},
{
xtype: 'container',
name: 'coordPostales',
layout: 'vbox',
items: [
{
xtype: 'fieldcontainer',
name: 'adresseStructure',
layout: 'hbox',
items: [
{
xtype: 'textfield',
name: 'numeroVoie',
emptyText: 'Num.',
fieldLabel: 'Adresse ',
enforceMaxLength: true,
maxLength: "4",
width: 160,
labelWidth: 120,
allowBlank: true
},
{
xtype: 'combobox',
name: 'idComplementNumeroRue',
displayField: 'libelleCNR',
valueField: 'idComplementNumeroRue',
queryMode:'local',
store: 'ComplementNumeroRue',
emptyText: 'Bis, Ter...',
hideTrigger: true,
width: 40,
allowBlank: true
},
{
xtype: 'combobox',
name: 'idTypeVoie',
displayField: 'court',
emptyText: 'Rue...',
queryMode:'local',
valueField: 'idTypeVoie',
store: 'TypeVoie',
hideTrigger: true,
width: 40,
allowBlank: true
},
{
xtype: 'textfield',
name: 'nomVoie',
emptyText: 'Nom de la voie',
allowBlank: true,
width: 130
}
]
},
{
xtype: 'fieldcontainer',
name: 'complementAdresseStructure',
items: [
{
xtype: 'textfield',
name: 'complementAdresse',
fieldLabel: 'Complement ',
emptyText: 'ZI, Lieu-dit...',
allowBlank: true,
labelWidth: 120,
width: 379
}
]
},
{
xtype: 'fieldcontainer',
name: 'villeStructure',
layout: 'hbox',
items: [
{
xtype: 'textfield',
name: 'codePostal',
maxLength: "5",
enforceMaxLength: true,
fieldLabel: 'Code Postal / Ville ',
labelWidth: 120,
width: 180,
allowBlank: true,
emptyText: '36000'
},
{
xtype: 'combobox',
name: 'idCommune',
queryMode: 'local',
hideTrigger: true,
minChars: 2,
displayField: 'nomCommune',
valueField: 'idCommune',
store: 'Commune',
allowBlank: false,
emptyText: 'CHATEAUROUX',
width: 196,
listeners: {
select: {
fn: function(cbo, rec) {
var codeP = rec[0].data.codePostal;
cbo.up('fieldcontainer[name="villeStructure"]').down('textfield[name="codePostal"]').setValue(codeP);
}
}
}
}
]
},
{
xtype: 'textfield',
name: 'cedex',
allowBlank: true,
labelWidth: 120,
width: 379,
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: 120,
width: 379,
fieldLabel: 'Point de remise ',
emptyText: 'i.e. Appartement 25... '
},
{
xtype: 'textfield',
name: 'localisationConstruction',
allowBlank: true,
labelWidth: 120,
width: 379,
fieldLabel: 'Localisation de la construction ',
emptyText: 'i.e. Batiment C...'
},
{
xtype: 'datefield',
name: 'dateEffet',
fieldLabel: 'Date d\'effet ',
format: 'd/m/Y',
labelWidth: 120,
width: 379,
allowBlank: false
}
]
},
{
xtype: 'hidden',
name: 'idAdresse'
}
]
});
me.callParent(arguments);
}
});
Here's the global code of the widget.