Using the combo box with local data

This recipe explains how to populate the Make combo box with data from a local array.

In the following screenshot, you'll see what the combo box looks like:

How to do it...

1. 1. Create the local data:

   var makes=[['Acura'],
   ['Aston Martin'],
   ['Audi'],
   ['BMW'],
   ['Buick'],
   ['Cadillac'],
   ['Chevrolet'],
   ['Chrysler'],
   ['Dodge'],
   ['Ferrari'],
   ['Ford'],
   ['GMC'],
   ['Honda'],
   ['HUMMER'],
   ['Hyundai'],
   ['Infiniti'],
   ['Isuzu'],
   ['Jaguar']
   ]
   

2. 2. Create the data store:

   var makesStore=new Ext.data.SimpleStore({
   fields:['name'],
   data:makes
   });
   

3. 3. Define the combo box:

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

4. 4. 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...