Fill the combo ExtJS by the custom data

Question

I have Combo ExtJS, that should be filled by the data from Spring MVC - like this:

    var LongRecord = Ext.data.Record.create([
        {name: 'id', mapping: 'id'}
    ]);

     var comboStore = new MyDataStore.data.Store({
        proxy: new MyDataStore.data.DwrProxy({
            invoker: function(params, arg, cb) {
                // data from server
                AssetScreener.getEntityOwnerIds(cb);
                console.log("invoker has been called");     
            }
        }),

        reader: new Ext.data.ArrayReader({}, LongRecord),
        listeners: {
               'load': function(s, recs) { 
                alert("!");

            }
         }
    });

Combo code:

new Ext.form.ComboBox({
  store:  comboStore,
  typeAhead: true,
  triggerAction: 'all',
  editable: false,
  width: 100,
  displayField: 'id',
  valueField: 'id'
});

Problem is that data, that I'm getting from server, looks like this

'5','0',["1","8","133"]

I need to slice the array ["1","8","133"] and show this in combo (change backend java-code is unwishable way).

In combo after this code is executed I see the three empty items. Need hints, please.

Answer 1

In the load event, you'll get the ["1","8","133"] from the recs parameter after slicing. Use store.loadData() to replace the current store records with the correct ones.

You can create a model out of the array to feed the store like so:

var i, item, feed = [];
for(i=0; i<array.length; i++)
{
   item = array[i];
   feed.push(Ext.create('com.your.Model', {
       id : item
   }));
}
store.loadData(feed);