parallax background

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

April 26, 2012
Digital Transformation Group LinkedIn
What to include in app.js (Ext JS 4.x)
April 26, 2012
Digital Transformation Group LinkedIn
Resetting the selection in a combobox (Ext JS 4.x)
April 26, 2012

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() {
     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('', {
 fields: ['name','id'],
 data : convertData

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



I live and work in the Dallas/Fort Worth area as a Principal Consultant for AppFoundation. I have been working with Java since 2000, Flex since it was in beta release, iOS development since 2008, and Sencha and Ext JS 4 since 2012. I have a Bachelor of Music with a double major in Music Performance and Music Composition, and a Bachelor of Science in Computer Information Science from Texas Christian University. I also have a Master of Science in Software Engineering from Southern Methodist University. I specialize in enterprise development, architecture, design, and continuous integration practices.

Comments are closed.