Please Help: Not able to load data on Combobox remotely using JSONStore?

[marimuthup]

Hi,

I am new to YUI-ext.

I liked these great widgets. I waana to use combobox for loading data remote thru JSON Reader.

I am using two combos first for loading the data from remote, second combo to load the data localy ( Extracted from the example)

First Combobox using the JSONStore is not able to load the data, though it gets the data from the server thru the url.

Second combo is loading the data locally

Firebug shows the request and the data return

POST http://localhost:8080/YahooUITest/GetCallCenter (62ms)ext-base.js (line 12)
ParamsHeadersPostResponse
Response Headers
Request Headers

{directions:[{name:"South",id:1},{name:"North",id:2},{name:"East",id:3},{name:"west",id:4},{name:"Middle"

,id:5}]}


I am for sure, I am missing some sequence.


var ResizableExample = {
init : function(){

var basic = new Ext.Resizable('basic', {
width: 200,
height: 100,
minWidth:100,
minHeight:50
});

var read = new Ext.data.JsonReader({
root: 'directions',
id: 'name'},
[
{name: 'name', mapping: 'name'},
{name: 'id', mapping: 'id'}
]);



var store1 = new Ext.data.JsonStore(
{
url: '/YahooUITest/GetCallCenter',
fields:['name','id'],
reader: read,

baseParams: {
type: 'name'
}
});

store1.load();

//mgr.on("update", transformCombo2);

var combo = new Ext.form.ComboBox({
store: store1,
displayField:'name',
valueField:'id',
typeAhead: true,
loadingText: 'Searching...',
mode: 'remote',
triggerAction: 'all',
emptyText:'Select a local state...',
selectOnFocus:true,
resizable:true,
forceSelection:true
});
combo.applyTo('local-states');
combo.on('select', combo1SelectionChanged);

// simple array store
var store2 = new Ext.data.SimpleStore({
fields: ['abbr', 'state'],
data : Ext.exampledata.states // from states.js
});

var combo2 = new Ext.form.ComboBox({
store: store2,
displayField:'state',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a state...',
selectOnFocus:true,
resizable:true
});
combo2.applyTo('states-abr');
combo2.on('select', combo2SelectionChanged);


}
};

function combo1SelectionChanged(record,index){
alert("Combo1 Selected " + record +" index " + index);
}

function combo2SelectionChanged(record,index){
alert("Combo2 Selected " + record +" index " + index);
}

Ext.EventManager.onDocumentReady(ResizableExample.init, ResizableExample, true);

[VinylFox]

I notice your using applyTo() to render your combobox to a dom element, Ive run into problems making this work correctly, instead I have used the config option "transform" which works as expected.


var combo = new Ext.form.ComboBox({
store: store,
displayField:'state',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a state...',
selectOnFocus:true,
transform: 'test2',
width:155
});

[marimuthup]

Thanks for the reply.

I tried with ur suggestion. Still combo box is not loaded with the options dynamically.

Note: in the select I have not added any option.

I feel its something to do with the update manager.

I think as the data is loaded remotely, need to listen for the load method of the store and thru updatemanager update the combo with the data.

Again, this is my assumption.

I am not sure how to do this.

Most of the examples are local based. But in usage its going to be remote data.

It would be great and effective for this wonderful tool to have good remote data examples.

Such examples would really reduce the time.

[VinylFox]

I started working on a tutorial for this, since its such a common request, its not finished, however the example is working fine. Your welcome to check out my code.

Remotely Populated Combobox (http://www.vinylfox.com/extjs/examples/forms-combobox-datastore/forms-combobox-datastore-working.php)

[marimuthup]

Thanks for the tutorial.

It helped to understand.

I tried the same tutorial with applyTo() it worked.

I got my combo box, but still not able to understand why JSON Store couldn't honor the root and root and totalProperty properties.

I change my Json data returned by my servlet, by making it simple array.

[{name:"South",id:1},{name:"North",id:2},{name:"East",id:3},{name:"west",id:4},{name:"Middle",id:5}]

I am not able to figure it out, what else I am missing on defining the root.

Not sure should I define it as namespace. (Tried didn't worked)

Or is this a bug.

PS: I am using ext 1.1-rc1 beta.