Comparer deux Combos Extjs [Débutant(e)]

**karilux** · 17/06/2015, 09h18

Bonjour,
Je suis débutante dans ExtJs et débutante en développement tous court.
J'aimerai faire une comparaison entre mes deux combos mais quand je click sur ma deuxième combo j'obtient un "undefined" .
Pourriez vous m'aider SVP ?

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
			<title>Exercice 4</title>
 
			<!-- Chargement de ExtJS-->
			<script type="text/javascript" src="../extjs/build/ext-all.js"></script>
 
			<!-- Chargement des fichers CSS---->
            <link rel="stylesheet" type="text/css" href="../extjs/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
 
			<!-- Chargement du code source de l application-->
            <script type="text/javascript" src="../extjs/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
        </head>
 
        <body>
            <script type ="text/javascript">
 
            Ext.define('Pays', {
                extend: 'Ext.data.Model',
                fields: ['id', 'nom', 'age']
            });
 
 
			Ext.onReady(function()
 
			{
                var storePays = Ext.create('Ext.data.Store', {
                    model: 'Pays',
                    proxy: {
                        type: 'ajax',
                        url : 'pays_data.php',
                        reader: {
                            type: 'json',
                            root: 'results'
                        }
                    }
                });
 
 
				Ext.define('modelAge', {
                extend: 'Ext.data.Model',
                fields: ['age', 'libAge']
				});
 
				var storeAge = new Ext.create('Ext.data.Store', {
						model: 'modelAge',
						data: 
						[
							<?php
							$retour="";
 
							for($i = 15 ; $i <= 30 ; $i++)
							{
								$retour.=($retour!=''?',':'')."{'age':".$i.",'libAge':'".$i." ans'}";
 
							}
 
							echo $retour;
 
							?>
						],
				});
 
				Ext.define('modelStatut',{
							extend: 'Ext.data.Model',
							fields: ['libStatut']
							});		
 
				var storeStatut = new Ext.create('Ext.data.Store',{
						model: 'modelStatut',
						data:
						[
							/*if  ((libStatut<=16 AND pays === "Népal")||
								(libStatut<=17 AND pays === "Corée")||
								(libStatut<=18 AND pays === "France")||
								(libStatut<=19 AND pays === "Algérie")||
								(libStatut<=21 AND pays === "Barhein"))
									{
										return"Vous êtes Majeur dans ce pays";								
									}
										else 
									{
										return "Vous êtes Mineur dans ce pays;
									}*/
 
						]
 
				});				
 
 
 
				maFenetre = Ext.create('Ext.Window', {				
					title: 'ceci est une fenetre',
					itemId : 'maFenetre',
					height     : 150,// Hauteur du formulaire
					width      : 300,// Largeur du formulaire
					bodyPadding: 10,
					items:
					[
						{
							xtype : 'combo',
							itemId: 'myCombo',
							fieldLabel: 'Pays',
                            queryMode: 'remote',
							store: storePays,							
							displayField: 'nom',
							valueField: 'id',
							emptyText: 'Select...',
							listeners:
							{
								 'select': function( combo, record, eOpts)
								 {
									/* alert(storePays.getById(maFenetre.down('#myCombo').getValue()).data.age); //Sans utiliser les paramètres
									 alert(record.data.age); //En utilisant les paramètres
									*/
									 maFenetre.down('#resultat').setValue("la majorité en(ou) au "+record.data.nom+" est à "+record.data.age+ " ans"); //Affectation en utilisant les paramètres
								 }
 
 
							}
 
 
 
						},
 
 
 
 
						{
							xtype: 'combo',	
							itemId : 'age',
							fieldLabel: 'Votre âge',
							queryMode: 'local',														
							store: storeAge,
							displayField: 'age',
							//displayField: 'majeur',
							valueField: 'id',
							emptyText: 'Select...',
							listeners:
							{
								 'select': function( combo, record, eOpts)
								 {
								 maFenetre.down('#resultat').setValue("Vous êtes "+record.data.nom+"   dans ce pays"); //Affectation en utilisant les paramètres
								 }
 
 
							}
						},
						{
							xtype: 'displayfield',
							hideLabel : true,
							itemId : 'resultat'
						}
 
					]
				});	
 
				maFenetre.show();
 
			});
 
			<?php
                                for($i = 15 ; $i <= 30 ; $i++)
                                echo $i;
                        ?>
 
 
 
			</script>
 
        </body>
    </html>

**sekaijin** · 17/06/2015, 20h27

C'est une très mauvaise idée que de mélanger le code php et le code ExtJS

les combo box sont associé à une datastore qui contient toutes les valeurs possibles
le datastore est configuré avec un proxy qui lui indique l'url php pour récupérer les valeurs

il n'y a donc pas de mélange entre javascript et php.

le code que tu fournis etant du code PHP on ne peux pas deviner ce qu'il va produire

le seul code interprété par le navigateur et le html et le javascript

pour qu'on puisse t'aider tu ouvre ta page et lorsque tout est affiché
tu vas dans les outils de ton navigateur et tu choisi afficher la source
tu auras alors le code html et javascript que ton navigateur a reçu.

A+JYT

**karilux** · 18/06/2015, 08h56

Merci Pour votre aide. J'ai ouvert le navigateur et voici le code source.
Pour le mélange de langage c'est comme ça qu'on m'a demandé de travailler et comme je débute je n'ai pas trop le choix.

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
			<title>Exercice 4</title>
 
			<!-- Chargement de ExtJS-->
			<script type="text/javascript" src="../extjs/build/ext-all.js"></script>
 
			<!-- Chargement des fichers CSS---->
            <link rel="stylesheet" type="text/css" href="../extjs/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
 
			<!-- Chargement du code source de l'application-->
            <script type="text/javascript" src="../extjs/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
        </head>
 
        <body>
            <script type ="text/javascript">
 
            Ext.define('Pays', {
                extend: 'Ext.data.Model',
                fields: ['id', 'nom', 'age']
            });
 
 
			Ext.onReady(function()
 
			{
                var storePays = Ext.create('Ext.data.Store', {
                    model: 'Pays',
                    proxy: {
                        type: 'ajax',
                        url : 'pays_data.php',
                        reader: {
                            type: 'json',
                            root: 'results'
                        }
                    }
                });
 
 
				Ext.define('modelAge', {
                extend: 'Ext.data.Model',
                fields: ['age', 'libAge']
				});
 
				var storeAge = new Ext.create('Ext.data.Store', {
						model: 'modelAge',
						data: 
						[
							{'age':15,'libAge':'15 ans'},{'age':16,'libAge':'16 ans'},{'age':17,'libAge':'17 ans'},{'age':18,'libAge':'18 ans'},{'age':19,'libAge':'19 ans'},{'age':20,'libAge':'20 ans'},{'age':21,'libAge':'21 ans'},{'age':22,'libAge':'22 ans'},{'age':23,'libAge':'23 ans'},{'age':24,'libAge':'24 ans'},{'age':25,'libAge':'25 ans'},{'age':26,'libAge':'26 ans'},{'age':27,'libAge':'27 ans'},{'age':28,'libAge':'28 ans'},{'age':29,'libAge':'29 ans'},{'age':30,'libAge':'30 ans'}						],
				});
 
				Ext.define('modelStatut',{
							extend: 'Ext.data.Model',
							fields: ['libStatut']
							});	
 
				var storeStatut = new Ext.create('Ext.data.Store',{
						model: 'modelStatut',			
				});				
 
 
 
				maFenetre = Ext.create('Ext.Window', {				
					title: 'ceci est une fenetre',
					itemId : 'maFenetre',
					height     : 150,// Hauteur du formulaire
					width      : 300,// Largeur du formulaire
					bodyPadding: 10,
					items:
					[
						{
							xtype : 'combo',
							itemId: 'myCombo',
							fieldLabel: 'Pays',
                            queryMode: 'remote',
							store: storePays,							
							displayField: 'nom',
							valueField: 'id',
							emptyText: 'Select...',
							listeners:
							{
								 'select': function( combo, record, eOpts)
								 {
									/* alert(storePays.getById(maFenetre.down('#myCombo').getValue()).data.age); //Sans utiliser les paramètres
									 alert(record.data.age); //En utilisant les paramètres
									*/
									 maFenetre.down('#resultat').setValue("la majorité en(ou) au "+record.data.nom+" est à "+record.data.age+ " ans"); //Affectation en utilisant les paramètres
								 }
 
 
							}
 
 
 
						},
 
 
 
 
						{
							xtype: 'combo',	
							itemId : 'age',
							fieldLabel: 'Votre âge',
							queryMode: 'local',														
							store: storeAge,
							displayField: 'age',
							//displayField: 'majeur',
							valueField: 'id',
							emptyText: 'Select...',
							listeners:
							{
								 'select': function( combo, record, eOpts)
								 {
								 maFenetre.down('#resultat').setValue("Vous êtes "+record.data.nom+"   dans ce pays"); //Affectation en utilisant les paramètres
								 }
 
 
							}
						},
						{
							xtype: 'displayfield',
							hideLabel : true,
							itemId : 'resultat'
						}
 
					]
				});	
 
				maFenetre.show();
 
			});
 
			15161718192021222324252627282930			
 
 
			</script>
 
        </body>
    </html>

**sekaijin** · 18/06/2015, 15h40

Il ne t'est pas interdit de créer un fichier php je suppose
sencha ne demande pas plus de droit que cela

de plus tu utilise déjà la bonne méthode dans

Code :

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

1
2
3
4
5
6
7
8
9
10
11
var storePays = Ext.create('Ext.data.Store', {
                    model: 'Pays',
                    proxy: {
                        type: 'ajax',
                        url : 'pays_data.php',
                        reader: {
                            type: 'json',
                            root: 'results'
                        }
                    }
                });

tu as un data store alimenté par le php pays_data.php
pourquoi ne pas utiliser le même principe pour le sages et les autres stores ?

si tu suis les tutos de la doc sencha tu ne mélangera pas le code et tu auras moins de difficulté

A+JYT

**sekaijin** · 18/06/2015, 16h26

Je te propose ceci
ta page html

Code html :

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
<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
      <title>Exercice 4
      </title>
      <!-- Chargement des fichers CSS---->
      <link rel="stylesheet" type="text/css" href="../extjs/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
      <!-- Chargement de ExtJS-->
      <script type="text/javascript" src="../extjs/build/ext-all.js"></script>
      <!-- Chargement du code source de l'application-->
      <script type="text/javascript" src="../extjs/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
      <script src="monappli.js" ></script>
   </head>
   <body>
   </body>
</html>

Le code de l'application est placé dans le fichier monappli.js

je n'ai rien changé à ton code sauf le datastore storeAge qui n'a plus de data mais un proxy

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
105
106
// JavaScript Document
 
 
Ext.onReady(function(){
  Ext.define('Pays', {
      extend: 'Ext.data.Model',
      fields: ['id', 'nom', 'age']
  });
 
  var storePays = Ext.create('Ext.data.Store', {
      model: 'Pays',
      proxy: {
          type: 'ajax',
          url : 'pays_data.php',
          reader: {
              type: 'json',
              root: 'results'
          }
      }
  });
 
 
  Ext.define('modelAge', {
    extend: 'Ext.data.Model',
    fields: ['age', 'libAge']
  });
 
  // Attention ici on utilise un proxy qui est un copié collé de celui des pays mas avec une autre url
  var storeAge = new Ext.create('Ext.data.Store', {
    model: 'modelAge',
      proxy: {
          type: 'ajax',
          url : 'age_data.php',
          reader: {
              type: 'json',
              root: 'results'
          }
      }
  });
 
  Ext.define('modelStatut',{
    extend: 'Ext.data.Model',
    fields: ['libStatut']
  });
 
  var storeStatut = new Ext.create('Ext.data.Store',{
     model: 'modelStatut',
  });
 
 
 
  maFenetre = Ext.create('Ext.Window', {
    title: 'ceci est une fenetre',
    itemId : 'maFenetre',
    height     : 150,// Hauteur du formulaire
    width      : 300,// Largeur du formulaire
    bodyPadding: 10,
    items:[
      {
        xtype : 'combo',
        itemId: 'myCombo',
        fieldLabel: 'Pays',
        queryMode: 'remote',
        store: storePays,
        displayField: 'nom',
        valueField: 'id',
        emptyText: 'Select...',
        listeners:{
          'select': function( combo, record, eOpts)
          {
            /* alert(storePays.getById(maFenetre.down('#myCombo').getValue()).data.age); //Sans utiliser les paramètres
            alert(record.data.age); //En utilisant les paramètres
            */
            maFenetre.down('#resultat').setValue("la majorité en(ou) au "+record.data.nom+" est à "+record.data.age+ " ans"); //Affectation en utilisant les paramètres
          }
        }
      },
      {
        xtype: 'combo',
        itemId : 'age',
        fieldLabel: 'Votre âge',
        queryMode: 'local',
        store: storeAge,
        displayField: 'age',
        //displayField: 'majeur',
        valueField: 'id',
        emptyText: 'Select...',
        listeners:{
          'select': function( combo, record, eOpts)
          {
             //record.data.nom n'existe pas dans le modèle modelAge => il faut soit record.data.libAge sot record.data.age
             maFenetre.down('#resultat').setValue("Vous êtes "+record.data.libAge+"   dans ce pays"); //Affectation en utilisant les paramètres
          }
        }
      },
      {
        xtype: 'displayfield',
        hideLabel : true,
        itemId : 'resultat'
      }
    ]
  });
 
  maFenetre.show();
 
});

enfin comme le datastore storeAge utilise un proxy avec l'url age_data.php il te faut le fichier age_data.php

Code php :

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
<?php
// tableau des résultat
$data = array();
for($i = 15 ; $i <= 30 ; $i++)
{
   // ajouter au tableau $data
   array_push($data,
      // l'age et son libellé
      array('age' => $i, 'libAge' => $i.' ans')
   );
}
//placer le tout dans l'objet retour
$retour=array('results' $data);
 
// renvoyer l'objet retour en json
echo echo json_encode($retour);

là j'ai revu ton code il est déconseillé de construire le json avec une sting
si tu fais un tableau clef/valeur en php tu obtiens un objet json
si tu fais un tableau de valeur en php tu obtiens un tableau json
j'ai donc créer un tableau retour qui sera l'objet json global sa valeur est le tableau data
qui lui contiendra un objet json par age
la méthode magique est simplement json_encode
si tu exécute ce php seul tu verras le résultat

le lien se fait par le proxy

Code :

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

1
2
3
4
5
6
7
8
      proxy: {
          type: 'ajax',
          url : 'age_data.php',
          reader: {
              type: 'json',
              root: 'results'
          }
      }

Cette définition indique que ExtJs va demander au serveur d’exécuter age_data.php et va lire les données dans le champs results.
d'où la présence de $retour=array('results' $data);

maintenant en ce qui concerne ton problème de undefined
tu as dans ton code une définition de modèle pour storeAge

Code :

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

1
2
3
4
  Ext.define('modelAge', {
    extend: 'Ext.data.Model',
    fields: ['age', 'libAge']
  });

chaque enregistrement est donc un objet qui a deux champs age et libAge. or dans ton listener tu as mis record.data.nom.
l'enregistrement n'as pas de champs nom il suffit de mettre record.data.libAge.

A+JYT

**karilux** · 18/06/2015, 16h30

Désolé mais je n'ai pas tous compris.

J'ai deux combo :
1 : pays
2 : Votre âge

je dois comparer les deux:
Ce que j'ai déjà codé:
quand je clique sur la première j'ai 'la majorité dans ce pays est à 18 ans' par exemple.

Ce que je dois codé:
Quand je clique sur la combo Votre age je devrais avoir 'Vous êtes mineur dans ce pays' ou' Vous êtes majeur dans ce pays'
il dois y avoir un truc du genre :
Si age de la majorité est supérieur à l'age sélectionner
Afficher Majeur
Sinon
Afficher Mineur

Que me manque t-il? Une autre fonction ? comment écrire cette fonction ?
Je le répète je débute dans le code donc les bases sont très fragile.

**karilux** · 18/06/2015, 16h38

Nos messages ce sont chevauchés .
Je vais essayer de suivre vos conseils.
Merci.

**Antjac** · 18/06/2015, 16h56

Tu as intérêt

(C'est moi qui lui ai donné ces exos à faire

)

**Antjac** · 18/06/2015, 17h07

Envoyé par sekaijin

C'est une très mauvaise idée que de mélanger le code php et le code ExtJS

les combo box sont associé à une datastore qui contient toutes les valeurs possibles
le datastore est configuré avec un proxy qui lui indique l'url php pour récupérer les valeurs

il n'y a donc pas de mélange entre javascript et php.

le code que tu fournis etant du code PHP on ne peux pas deviner ce qu'il va produire

le seul code interprété par le navigateur et le html et le javascript

pour qu'on puisse t'aider tu ouvre ta page et lorsque tout est affiché
tu vas dans les outils de ton navigateur et tu choisi afficher la source
tu auras alors le code html et javascript que ton navigateur a reçu.

A+JYT

En fait, pour remettre dans le contexte.

L'utilisation de fichiers php contenant le code EXTjs est indispensable pour le projet sur lequel karilux est amenée à travailler (un ERP interne pour lequel ces exercices doit la préparer), notamment à cause d'une gestion des droits et d'un préfixage des variables JS dynamiques permettant le chargement de la même fenêtre extjs dans des divs différents... (Pour faire simple...)

+1 pour json_encode sur la constitution de son json listant les âges.

Comparer deux Combos Extjs [Débutant(e)]

Ext JS / Sencha

Discussions similaires

Partager

Partager