Cascading combo boxes

Sometimes, you need to present your users with two or more combo boxes, where the selection of an option in one combo box determines the available options in the others.

The Car Reviews form built in this recipe contains a Make combo box and a Model combo box, as seen below:

Selecting a make enables the Model combo box, which displays the models for the selected make, as seen in the following screenshot:

How to do it...

1. 1. Create the makes data store:

   var makesStore=new Ext.data.JsonStore({
   url: 'cars-makes-models.php',
   baseParams:{cmd:'makes'},
   root: 'makes',
   fields: ['id', 'name']
   });
   

2. 2. Create the models data store:

   var modelsStore=new Ext.data.JsonStore({
   url: 'cars-makes-models.php',
   baseParams: { cmd:'models'},
   root: 'models',
   fields: ['id', 'name']
   });
   

3. 3. Define the Make combo box:

   var MakeCombo={
   xtype: 'combo',
   store: makestore,
   displayField: 'name',
   valueField: 'id',
   typeAhead: true,
   editable: false,
   mode: 'remote',
   forceSelection: true,
   triggerAction: 'all'...