I am posting this as a help for anybody running into a similar problem.




PROBLEM:


The EXTJS combo box expects data to populate it be formatted as, for example:



Code:
{

"rice-types": [

        {
            "name": "brown"
        },
        {
            "name": "basmati"

        },
        {
            "name": "jasmine"
        }
   ]
}
However what was coming back from the legacy server was:

Code:

Code:
{
"rice-types": [
            "brown",
             "basmati",
             "jasmine"
         ]

}


SOLUTION:


The basic solution is to override read in the store's reader.


HOW DO THEY DO THAT:

Assume we have the following MODEL and STORE

MODEL:

Code:
Ext.define('App.model.RiceModel', {

    extend: 'Ext.data.Model',

    fields: [
        {
            name: 'name',
            type: 'string'
        }
    ]
});


STORE:



Code:
Ext.define('App.store.MyJsonStore2', {

    extend: 'Ext.data.Store',


    requires: [
        'App.model.RiceModel'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            storeId: 'MyJsonStore2',
            model: 'App.model.RiceModel',
            proxy: {
                type: 'ajax',
                url: '/api/ricestuff',
                reader: {
                    type: 'json'
                }
            }
        }, cfg)]);

    }
});

1, In SA select the reader for the above store in the Project Inspector


2. In the config panel add a new property "read"
3: Click on the read property name and select "object" from the list
4. Now click on the Value for that and it will give you an edit window to add your code.
5. Add you code to convert the data, as shown below:

Code:


function(response) {

     // get the incoming message to be converted
    var json = Ext.decode(response.responseText);

    var convertedRice = {
        "rice-types" : []
    }
    // convert it to my json message format
    for (var i = 0; i < json['rice-types'].length; i++) {

        var obj = {
            'name' : json['rice-types'][i]
        }
        convertedRice["rice-types"].push(obj);
    }

    // this part is very import, be sure to call readRecords(your_data);
    return this.readRecords(convertedRice);
}









6. That's it, the import thing to note is the last line in the above code, be sure to " return this.readRecords(your_converted_date);", else you will get some "length undefined" error.


The complete Store with the override 'read' is shown below:

Code:
Ext.define('App.store.MyJsonStore2', {

    extend : 'Ext.data.Store',

    requires : ['App.model.RiceModel'],

    constructor : function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            storeId : 'MyJsonStore2',
            model : 'App.model.RiceModel',
            proxy : {
                type : 'ajax',
                url : '/api/ricestuff',
                reader : {
                    type : 'json',
                    read : function(response) {

                        var json = Ext.decode(response.responseText);

                        var convertedRice = {
                            "rice-types" : []
                        }

                        for (var i = 0; i < json['rice-types'].length; i++) {

                            var obj = {
                                'name' : json['rice-types'][i]
                            }
                            convertedRice["rice-types"].push(obj);
                        }

                        return this.readRecords(convertedRice);
                    }
                }

            }
        }, cfg)]);

    }
});