1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
|
// source de données Pays
var dataPays= new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: 'pays.php'
}),
// Définition du lecteur (format Json)
reader: new Ext.data.JsonReader({
root: 'pays',
totalProperty: 'nb',
id: 'id_pays'
}, [
{name: 'id_pays', mapping: 'id_pays'},
{name: 'nom_pays', mapping: 'nom_pays'}
])
});
dataPays.load();
// Template (format d'affichage dans la liste comboBox)
var tplPays = new Ext.XTemplate(
'<tpl for="."><div class="search-item">',
'<span><b>{nom_pays}</b>',
'</div></tpl>'
);
var dataVille= new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: 'ville.php'
}),
// Définition du lecteur (format Json)
reader: new Ext.data.JsonReader({
root: 'villes',
totalProperty: 'nb',
id: 'id_ville'
}, [
{name: 'id_ville', mapping: 'id_ville'},
{name: 'nom_ville', mapping: 'nom_ville'}
]),
autoLoad: true
});
// Template (format d'affichage dans la liste comboBox)
var tplVille = new Ext.XTemplate(
'<tpl for="."><div class="search-item">',
'<span><b>{nom_ville}</b>',
'</div></tpl>'
);
// mon formulaire
var myFormPanel = new Ext.FormPanel({
id: 'myFormPanel',
// url:
frame: true,
autoWidth: true, //largeur de la fenêtre
autoHeight: true, //hauteur de la fenêtre
labelAlign: 'right', //les labels s'aligneront a droite
bodyCfg: {tag:'center', cls:'x-panel-body'}, //on aligne tous les champs au milieu de la fenêtre
bodyStyle: 'padding:5p;margin:0px; ',
items: [{
xtype: 'combo',
fieldLabel: 'Pays',
id: 'combo_pays',
name: 'combo_pays',
allowBlank: false,
loadingText: 'Chargement en cours',
pageSize:20,
minChars:0,
style:'width:90%',
typeAhead: false,
hideTrigger:false,
itemSelector: 'div.search-item',
store: dataPays,
tpl: tplPays,
triggerAction:'all',
queryMode:'local',
listeners:{select:{fn:function(combo, value) {
var modelCmp = Ext.getCmp('combo_ville');
modelCmp.setValue('');
modelCmp.setDisabled(false);
modelCmp.store.removeAll();
modelCmp.store.reload({
params: { pays: combo.getValue() }
});
}}}
}, {
xtype: 'combo',
fieldLabel: 'Ville',
id: 'combo_ville',
name: 'combo_ville',
allowBlank: false,
loadingText: 'Chargement en cours',
pageSize:20,
minChars:0,
disabled: true,
store: dataVille,
tpl: tplVille,
triggerAction:'all',
queryMode:'local',
lastQuery:'',
allowBlank: false,
typeAhead: true,
itemSelector: 'div.search-item',
autoHeight: true
}]
}); |
Partager