ExtJs - Formulaire avec 2 combobox dynamiques liées

**flilou** · 06/03/2013, 15h54

Bonjour,

je travaille actuellement sur un formulaire en ExtJs qui contient deux champs de type 'combo'.

Mon combo 1 est construit à partir de données Json et s'affiche correctement dans mon formulaire.
Mon combo 2 est par défaut vide, et son contenu dépend de la valeur sélectionnée dans le combo 1, et est également construit à partir de données Json.

Ci-dessous mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
// 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>'
	);
 
// 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, 
				onSelect: function(record){ 
				 this.setValue(record.data.id_pays); 
				 this.collapse();
				 getVilles(this.value);}
			}, {
				xtype: 'combo',
				fieldLabel: 'Ville',
				id: 'combo_ville',
				name: 'combo_ville',
				allowBlank: false,
				store: []
		}]
	});
 
// ma fonction qui permet de mettre à jour ma combo 2 pour la liste des villes
function getVilles(arg) {
	alert(arg);
	var dataVille = new Ext.data.Store({
		proxy: new Ext.data.ScriptTagProxy({
	        url: 'ville.php?pays='+arg
	    }),
	    reader: new Ext.data.JsonReader({
	        root: 'villes',
	        totalProperty: 'nb',
	        id: 'id_ville'
	    }, [
	        {name: 'id_ville', mapping: 'id_ville'},
	        {name: 'nom_ville', mapping: 'nom_ville'}
	    ])
	});
	dataVille.load();
	Ext.getCmp('combo_ville').store.loadData(dataVille);
}

je ne comprends pas pourquoi ma combo 2 ne se met pas à jour, pourtant mes résultats s'affichent bien en Json.

Merci d'avance pour votre aide...

**sekaijin** · 07/03/2013, 19h22

je ne comprend pas pourquoi tu fait

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

store: []

pourquoi ne pas afecter directement le datastore correspondant ?

tu a une discu sur le site de sencha
http://www.sencha.com/forum/showthre...mbobox-(remote)

A+ JYT

**flilou** · 08/03/2013, 09h46

Merci pour sa réponse ...

J'ai apporté une modification à mon code en affectant le datastore directement à ma combo 2 et lors d'un select dans mon combo 1, je reload cette datastore en passant comme paramètre la valeur du combo 1.

Voici mon code pour mieux comprendre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Mais le problème persiste toujours... Il semble que les données sont bien "re-loadés" car j'ai dans la pagination de ma combo 2 le nombre de page qui évolue en fonction de la valeur sélectionnée dans ma combo1, mais rien ne s'affiche...

D'où peux venir mon problème???

Merci d'avance pour vos retours...

**sekaijin** · 08/03/2013, 10h56

le sujet à déjà été abordé
http://www.developpez.net/forums/d10...valeurs-combo/
/!\ ext3:
http://www.sk-typo3.de/ExtJS-Dynamis...xen.337.0.html
http://java.dzone.com/articles/tutor...ascading-extjs

il y a pas mal de doc sur le net pour expliquer comment faire

A+JYT

**flilou** · 08/03/2013, 11h07

Merci pour ces liens...

le souci n'est pas comment dois je faire, car j'ai compris le principe ...

Mon souci c'est que je ne vois pas ce qui n'est pas bon dans mon code. Pourquoi ma liste ne s'affiche pas dans ma combo 2 alors qu'elle est bien "re-loadé" ..

Je vais quand même voir à partir des liens que tu m'as donné si je n'aurais pas zappé quelque chose...

Encore merci.

**flilou** · 08/03/2013, 11h50

Désolé pour tous ces messages,

je viens de me rendre compte qu'il y avait un problème côté serveur dans ma requête permettant d'obtenir la liste des valeurs pour mon combo 2..
D'où le problème d'affichage, j'ai bien des résultats mais je n'affichais pas les bonnes colonnes...

Encore merci à sekaijin

Problème résolu

ExtJs - Formulaire avec 2 combobox dynamiques liées

Ext JS / Sencha

Vue hybride

Discussions similaires

Partager

Partager