combo cascading Extjs4

Bonjour,
J'ai vu un tuto sur la réalisation d'un combo cascading Exjs3 que j'ai voulu passé sur Extjs4 mais Extjs se comporte autrement que la version 3. C'est un petit exemple des voitures (make) et de leur model (model)

Code:

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
var makesStore = new Ext.data.JsonStore({
 
    fields: ['id', 'name'],
    proxy:{
        type:'ajax', 
        extraParams:{cmd:'makes'},
        actionMethods:{
            read:'GET'
        },
        url: './cars-makes-models.php',
        reader:{
              type:'json',
              root: 'makes'
 
           }
    }
});
//makestore.load({params:{start:0, limit:20}});
var modelsStore = new Ext.data.JsonStore({
 
    fields: ['id', 'name'],
    proxy:{
        type:'ajax',
        extraParams: { cmd:'models'},
        actionMethods:{
            read:'GET'
        },
        url: 'cars-makes-models.php',
        reader:{
              type:'json',
              root: 'models',
 
           }
    }
});
 
var makesCombo = {
    xtype: 'combo',
    store: makesStore,
    id:'idmakesCombo',
    displayField: 'name',
    valueField: 'id',
    typeAhead: true,
    editable:false,
    mode: 'remote',
    forceSelection: true,
    triggerAction: 'all',
    fieldLabel: 'Make',
    emptyText: 'Select a make...',
    selectOnFocus: true,
    anchor:'95%',
    listeners: {
        'select': function(cmb, rec, idx) {
            modelsCbx = Ext.getCmp('models-combo');
            modelsCbx.clearValue();
            modelsCbx.store.load({
                params: { 'makeId': this.getValue() }
            });
            modelsCbx.enable();                    
        }
    }
}
 
var modelsCombo = {
    xtype: 'combo',
    id:'models-combo',
    store: modelsStore,
    displayField: 'name',
    valueField: 'id',
    typeAhead: true,
    editable: false,
    mode: 'local',
    forceSelection: true,
    triggerAction: 'all',
    fieldLabel: 'Model',
    emptyText: 'Select a model...',
    selectOnFocus: true,
    disabled: true,
    anchor: '95%'
}

le comportement qu'il donne c'est que lorsque le deuxieme combo est activé et que je clique dessus au lieu d'avoir la liste des models, j'ai une erreur json et dans la console du firebug, j'ai remarqué qu'il redemande mon parametre makeId passé en parametre dans le listener, bref mon fichier php est appelé deux fois, ce qui est bizarre puisse que le store de mon deuxième combo box est déjà load

le fichier php est sous cette forme

Code:

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
<?php 
ini_set("display_errors", true);
ini_set("html_errors", true);
 
$command = $_GET["cmd"];
$out = "";
 
switch ($command) {
 
  case "makes":
    $out = GetMakes();
    break;
 
case "models":
	$makeId = $_GET["makeId"];
    $out = GetModels($makeId);
    break;		
}
 
echo utf8_encode($out);
 
function GetMakes() {   
 
    $makes = "{'makes':[";
    $makes .= "{'id':'1','name':'Acura'},"; 
    $makes .= "{'id':'2','name':'Aston Martin'},";
    $makes .= "{'id':'3','name':'Audi'},";
    $makes .= "{'id':'4','name':'BMW'},";
    $makes .= "{'id':'5','name':'Buick'},";
    $makes .= "{'id':'6','name':'Cadillac'},";
    $makes .= "{'id':'7','name':'Volkswagen'},";
    $makes .= "{'id':'8','name':'Volvo'}";	
	$makes .= "]}";
 
	return $makes;
} 
 
function GetModels($makeId) {   
 
 
	$models = "{'models':[";
 
	switch ($makeId) {
 
	  case 1:	// Acura
		$models .= "{'id':'1','name':'MDX'},"; 
		$models .= "{'id':'2','name':'RDX'},";
		$models .= "{'id':'3','name':'RL'},";
		$models .= "{'id':'4','name':'TL'},";
		$models .= "{'id':'5','name':'TSX'}";
		break;
 
		case 2:	// Aston Martin
			$models .= "{'id':'1','name':'DB9'},"; 
			$models .= "{'id':'2','name':'DBS'},";
			break;		
 
 
		default:	// Why do't you code the rest of the models? :)
			$models .= "{'id':'0','name':'No data found'}"; 
	}
 
	$models .= "]}";
 
	return $models;
} 
?>

j'ai trouvé la solution, la version de ma librairie EXTJS était la 4.0.7, je viens de télécharger la 4.1 et ça passe bien.

Bonjour,

en migrant de extjs4.0.7 vers 4.1 tu n'as pas eu des problèmes au niveau du code. la façon de déclarer les variables et tous.
moi je souffre de ce problème en extjs4.0.7,et je sais pas comment je doit faire.
quand je charge la deuxième combobox a partir de la première .la deuxième combobox apparaît avec un loading image et il ne veut pas disparaître

Non je n'ai eu aucun problème car c'est la même version la 4. Change juste le dossier de la librairie et tu verras que ça marche