Populate ComboBox via Ajax

[andrewjbaker]

Hi all,

I've successfully populated a SimpleStore using Ext.Ajax.request() and bound the SimpleStore to a ComboBox. This method works... wahoo!

But...

I would prefer to use Ext.data.HttpProxy to retrieve the data (sent as JSON from the GetAllValues.ashx generic handler.) My code at present consists of:



var store1 = new Ext.data.SimpleStore({
fields: ['key', 'value'],
method: 'GET',
proxy: new Ext.data.HttpProxy({ url: 'Bsl/GetAllValues.ashx?methodName=Execute&args=AbsenceCategories' }),
reader: new Ext.data.JsonReader(
{ id: 'key' },
[ { name: 'key', mapping: 'key' },
{ name: 'value', mapping: 'value' } ]
),
remoteSort: false
});
var comboBox1 = new Ext.form.ComboBox({
displayField: 'value',
emptyText: '...',
fieldLabel: 'Key',
mode: 'local',
selectOnFocus: true,
store: store1,
triggerAction: 'all',
typeAhead: true,
valueField: 'key',
width: 192
});
/* ... */


Put quite simply; it ain't working. Firebug finds no errors and yet comboBox1 isn't populated. For the curious, GetAllValues.ashx returns:



[["MAT","Maternity/Paternity leave"],["OTH","Other paid authorised absence, e.g. compassionate leave"],["PUB","Paid absence for public duties"],["SEC","Secondment"],["SIC","Sickness"],["TRN","Training"],["UNA","Unauthorised absence"],["UNP","Unpaid, authorised absence"]]


Any ideas folks?

[tryanDLS]

Use a regular Store instead of SimpleStore.

[andrewjbaker]

I converted my code to use a Store rather than a SimpleStore as suggested.

Still no joy. Current code as follows:



var store1 = new Ext.data.Store({
fields: ['key', 'value'],
method: 'GET',
proxy: new Ext.data.HttpProxy({ url: 'Bsl/GetAllValues.ashx?methodName=Execute&args=AbsenceCategories' }),
reader: new Ext.data.JsonReader({
fields: [
{ name: 'key', mapping: 'key' },
{ name: 'value', mapping: 'value' }
],
id: 'key'
}),
remoteSort: false
});

[tryanDLS]

You're not returning valid JSON. Each 'row' needs to be of the form

{key:'foo', value:'bar'} <- braces, not brackets
to match the layout in the reader.

[andrewjbaker]

Thanks Tim, JSON altered as follows:



[{"Key":"MAT","Value":"Maternity/Paternity leave"},{"Key":"OTH","Value":"Other paid authorised absence, e.g. compassionate leave"},{"Key":"PUB","Value":"Paid absence for public duties"},{"Key":"SEC","Value":"Secondment"},{"Key":"SIC","Value":"Sickness"},{"Key":"TRN","Value":"Training"},{"Key":"UNA","Value":"Unauthorised absence"},{"Key":"UNP","Value":"Unpaid, authorised absence"}]


And code altered to...



var store1 = new Ext.data.Store({
fields: ['key', 'value'],
method: 'GET',
proxy: new Ext.data.HttpProxy({ url: 'Bsl/GetAllValues.ashx?methodName=Execute&args=AbsenceCategories' }),
reader: new Ext.data.JsonReader({
fields: [
{ name: 'key', mapping: 'Key' },
{ name: 'value', mapping: 'Value' }
],
id: 'key',
root: 'root'
}),
remoteSort: false
});


ComboBox still not populating tho'. Hmm...

Is it a case-sensitivity issue; 'Key' vs. 'key', etc.?

[andrewjbaker]

Ah...

Am going to amend my server-side code to drop double quotes from both key and value properties when generating JSON.

[tryanDLS]

Javascript is case-sensitive, but it looks like your mapping is correct. Have you verified via Firebug that the request is coming back? Also add a listener for the store's loadexception event and see if gets there.

You have mode:'local', so you need to call store.load() or make it mode:'remote' so it will load when you click the arrow. Method is a config of the proxy, not the store.

Also, you have specified the root property, but it's not present in your data.


{root:[
{"Key":"MAT","Value":"Maternity/Paternity leave"},
{"Key":"OTH","Value":"Other paid authorised absence, e.g. compassionate leave"},
{"Key":"PUB","Value":"Paid absence for public duties"},
{"Key":"SEC","Value":"Secondment"},
{"Key":"SIC","Value":"Sickness"},
{"Key":"TRN","Value":"Training"},
{"Key":"UNA","Value":"Unauthorised absence"},
{"Key":"UNP","Value":"Unpaid, authorised absence"}
]}

[tryanDLS]

Quotes around the property names aren't a problem
{key:'foo'} is the same as {"key":"foo"}. It's less characters to send without, but unless you're building the string yourself, server libs put them in.

[andrewjbaker]

Hi Tim,

Thank you very much for your assistance. I have written a custom JSON generator for the purposes of populating ComboBox controls. It spits out JSON in the format you have described and all now works as expected.

Final Ext JS code...



var store1 = new Ext.data.Store({
fields: ['key', 'value'],
proxy: new Ext.data.HttpProxy({
method: 'GET',
url: 'Bsl/GetAllValues.ashx?methodName=Execute&args=AbsenceCategories'
}),
reader: new Ext.data.JsonReader({
fields: [
{ name: 'key', mapping: 'Key' },
{ name: 'value', mapping: 'Value' }
],
id: 'key',
root: 'root'
}),
remoteSort: false
});
var comboBox1 = new Ext.form.ComboBox({
displayField: 'value',
emptyText: '...',
fieldLabel: 'Key',
mode: 'remote',
selectOnFocus: true,
store: store1,
triggerAction: 'all',
typeAhead: true,
valueField: 'key',
width: 192
});