PDA

View Full Version : [solved] populate comboBox using remote JSON store



marcvs
13 Sep 2009, 4:40 PM
Hi All,

Sorry if this looks *really* familiar...:)

I am trying to make a combobox use a remote datastore. The data comes from a PHP file which echoes its output using json_encode. When I type into the combobox it just keeps displaying the loadingText and shows no results.

I've seen some examples using Ext.data.ArrayStore which worked fine, so I think the problem lies either in my datastore code, or the format of my JSON output from PHP.

Datastore code:






var remoteJsonStore = new Ext.data.JsonStore({
root : 'records',
baseParams : {
column : 'lastName'
},
fields : [
{
name : 'lastName',
mapping : 'lastName' // db fieldname?
},
{
name : 'userId',
mapping : 'userId'
}
],
proxy : new Ext.data.ScriptTagProxy({
url : 'http://localhost:8080/ext_sample/scripts/php/db_operations.php'
})
});



This is the output from my PHP file if I go to it directly in the browser. Tabs and newlines have been added here for legibility. I'm not very handy with JSON - I added the outer parenthesis '(' and ')' manually, otherwise I get "invalid label" in FireBug.


({
totalCount:12,
records:[
{"userId":"6","firstName":"Kent","lastName":"Brockman","accountId":"2"},
{"userId":"3","firstName":"Monty","lastName":"Burns","accountId":"2"},
{"userId":"7","firstName":"Ned","lastName":"Flanders","accountId":"1"},
{"userId":"4","firstName":"Herschel","lastName":"Krustofski","accountId":"2"},
{"userId":"5","firstName":"Troy","lastName":"McClure","accountId":"1"},
{"userId":"11","firstName":"Joe (Mayor)","lastName":"Quimby","accountId":"2"},
{"userId":"1","firstName":"Homer","lastName":"Simpson","accountId":"1"},
{"userId":"2","firstName":"Bart","lastName":"Simpson","accountId":"1"},
{"userId":"10","firstName":"Waylon","lastName":"Smithers","accountId":"1"},
{"userId":"9","firstName":"Moe","lastName":"Szyslak","accountId":"1"},
{"userId":"8","firstName":"Clancy (Chief)","lastName":"Wiggum","accountId":"1"},
{"userId":"12","firstName":"Rainier (McBain)","lastName":"Wolfcastle","accountId":"2"}
]
})
This is the code for the combobox, although this should be fine as it works when I used ArrayStore:






var combo = {
xtype : 'combo',
fieldLabel : 'my combo',
forceSelection : true,
displayField : 'lastName',
valueField : 'userId',
hiddenName : 'hiddenId',
loadingText : 'getting data...',
minChars : 1,
triggerAction : 'lastName',
store : remoteJsonStore
};



Any hints would be greatly appreciated.

Cheers!

marcvs
13 Sep 2009, 9:01 PM
I removed the proxy (ScriptTagProxy) part from the datastore code and just left the url property.





var remoteJsonStore = new Ext.data.JsonStore({
root : 'records',
baseParams : {
column : 'lastName'
},
fields : [
...
],
url : 'http://localhost:8080/ext_sample/scripts/php/db_operations.php'
});




I am getting the data in the combobox now. The problem is that I wanted to use the typeAhead feature here, and now upon each keypress the combobox is making a POST to the PHP getting all the records, while at the same time resetting the typeAhead (first item in the list becomes highlighted regardless of what had already typed in the box). I'm guessing this filtering part has to be done on the PHP side, right?

marcvs
14 Sep 2009, 3:59 AM
Hi again,

I guess the POST on every triggerAction is the intended behavior here since it is using remote mode. As a temporary fix I set mode:'local' in my combo configuration and loaded the datastore beforehand using remoteJsonStore.load();. Now the data is loaded all in memory and typeAhead works fine.

I plan to have a larger recordset and would like to switch back to remote mode and use paging so that only a small number of records is returned on each triggerAction.

But that would be another thread... so I'll mark this one as solved.