Populate a ComboBox from a DataStore (JSON)

I would suggest downloading the code used for this example here so you have something to work with. Working examples can be found here.

Getting Started

The ComboBox is always a very usefull form field type, and populating it dynamically makes it even more usefull. We will just be creating a basic ComboBox thats populated from a JSON data source which pulls data from our database.

Setup The Reader

As with any data source, we will need to setup the reader so our data store knows how to read the JSON data were retreiving. We can pass an empty config object to JsonReader since were just populating a simple ComboBox and the second argument is a very simple record definition.

var rd_random_employee_data = new Ext.data.JsonReader({}, [ 'id', 'name']);

Setup The Data Store

The data source uses a standard store, which by default reads JSON formatted data.

var ds_random_employee_data_active = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ // this json data contains only employees where active is 'true' url: 'forms-combobox-data.php?active=true' }), reader: rd_random_employee_data, remoteSort: false });

The ComboBox

Now we just specify the store in our ComboBox instantiation code and set the displayField and hiddenName (which should be different from the name, if specified).

var random_employees_active = new Ext.form.ComboBox({ fieldLabel: 'Active Random Employee Data', store: ds_random_employee_data_active, valueField: 'id', displayField: 'name', hiddenName: 'active_id', mode: 'remote', minChars : 0 });

Setting the minChars to zero and the mode to 'remote' will make sure that the data is fetched each time the combo is clicked or focused.