Loading JSON data from a web service into a combobox (Ext JS 4.x)

Combo boxes don’t work like grids, in that you just can call the combo box “getStore().loadData” function and pass in the JSON data. I eventually found that you have to do several things in order to get JSON Data into a combo box. There is hopefully a better way to do this, but for the time being I just needed something that actually worked.

Assume the JSON Data looks like the following:

[ {“id”:”1”, “name”:”Alpha”}, {“id”:”2”, “name”:”Bravo”} ]

1. You have to decode the JSON data into an object

...
myWebService: function() {
     Ext.Ajax.request({
     url: 'http://localhost:8080/getstuff',
     method: 'GET',
     scope: this,
     success: function (response) {
     var jsonResp = Ext.JSON.decode(response.responseText);
...

2. You have to convert the decoded JSON data into an array of objects

Notice how you can iterate through the decoded JSON response like it is an array of objects.

var convertData = [];
for (var i = 0; i < jsonResp.length; i++) {

convertData.push( {'name': jsonResp[i].name, “id”:jsonResp[i].id} );

}

3. You have to manually map the JSON decoded data into a created Store

var store = Ext.create('Ext.data.Store', {
 fields: ['name','id'],
 data : convertData
});

4. You have to bind the store to the combo box

myComboBox.bindStore(store);