Displaying remote data with a combo box

This recipe explains how to populate the Make combo box with data from the server, as seen in the following screenshot:

How to do it...

1. 1. Create the data store:

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

2. 2. Declare the combo box:

   var MakeCombo={
   xtype: 'combo',
   store: makesStore,
   displayField: 'name',
   valueField: 'id',
   editable: false,
   mode: 'remote',
   forceSelection: true,
   triggerAction: 'all',
   fieldLabel: 'Make'',
   emptyText: 'Select a make...',
   selectOnFocus: true
   }
   

3. 3. Create a form to host the combo box:

   Ext.onReady(function() {
   var newCarForm=new Ext.FormPanel({
   frame: true,
   title: 'Get a quote',
   bodyStyle: 'padding:5px',
   width: 420,
   id: 'make-selector-frm',
   url: 'new-car.php',
   items: [
   MakeCombo
   ],
   buttons: [{
   text: 'Go',
   handler: function() {
   Ext.getCmp('make-selector-frm').getForm().submit();
   }
   }, {
   text: 'Cancel'
   }]
   });
   newCarForm.render(document.body...