using single value json into extjs combobox - json

Question

This is the json response I am getting. I checked with JSONLINT and it says valid, but if you notice it's only giving me value without the heading of the column... the column name is "States".
{"myTable":["VA","CA","CO","OK","PA","TX"]}
Would it be possible to use this Json to load in my combobox
items: [{
xtype: 'combo',
id: 'iccombo',
scope: this,
store: this.store,
mode: 'remote',
minChars: 0,
fieldLabel: 'Short State',
displayField: 'States',
valueField: 'States',
typeAhead: true,
name: 'States',
labelWidth: 125,
anchor: '95%'
},
this is my store
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
id: 'OurData',
scope: this,
fields: [{ name: 'States' }],
proxy: {
type: 'ajax',
url: 'GetState/getS',
reader: {
type: 'json',
root: 'myTable'
idProperty: 'States'
}
}
});

Answer 1

Out of the box Ext has the Array Reader which is almost a match but a tweak is required for the data format you have. The Array Reader can be customized to take your data format and turn it into the format needed. This kind of customization is common for many services that cannot be modified at the server level and so we can easily adjust at the UI level thanks to the Ext JS data framework.
Here is a custom reader that you could use as well as an implementation based on your example and a quick loop that shows the data by record:
/**
* A customized reader to convert a list to an array for the
* ArrayReader to take
*/
Ext.define('Ext.ux.data.reader.JsonList', {
extend: 'Ext.data.reader.Array',
alias : 'reader.jsonlist',
root: 'myTable',
/**
* this is really the guts of the change
* convert an array of strings to an array of arrays of strings
*/
extractData: function (root) {
var data;
if (Ext.isArray(root) && !Ext.isArray(root[0])) {
root.forEach(function (val, idx, all) {
/* turn the value into an array */
all[idx] = [val];
})
}
data = root;
/* hand the array of arrays up to the ArrayReader */
return this.callParent([data]);
}
});
store = Ext.create('Ext.data.Store', {
autoLoad: true,
id: 'OurData',
scope: this,
fields: [{ name: 'State' }],
proxy: {
/* change this back to ajax to get server data */
type: 'memory',
url: 'GetState/getS',
reader: {
type: 'jsonlist'
}
},
/* temp data for simplified demo code */
data: {"myTable":["VA","CA","CO","OK","PA","TX"]}
});
/* just to demo that there are six records with State as the field name: */
store.each(function (rec, id, total) {
console.log(rec.get('State'))
});