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
}]
}); |
