PDA

View Full Version : ComboBox doesn't populate



cheetos007
15 Sep 2011, 2:26 PM
I just started working on ExtJS v4 and am trying to load a combo box with items retrieved from server using JsonStore. I tried many options given in previous responses/links in vain. All I get is a blank combo box. I think I'm making a simple beginner like error that I can't pin point. Any help is much appreciated.

JSON response string in FireBug:



{"searchTemplates":
[
{
"searchTemplateValue":"1",
"searchTemplateDisplay":"Template_1"
},
{
"searchTemplateValue":"2",
"searchTemplateDisplay":"Template_2"
},
{
"searchTemplateValue":"3",
"searchTemplateDisplay":"Template_3"
}
]
}


Javascript code in app.js:


var searchTemplateStore1 = new Ext.data.JsonStore({
root: 'searchTemplates',
restful: true,
proxy: new Ext.data.HttpProxy({
url: 'search/searchTemplate.json'
}),
writer: null,
fields: [
{name: 'searchTemplateValue', type: 'string'},
{name: 'searchTemplateDisplay', type: 'string'}
]
});

var searchTemplateFields = {
items: [
{
xtype: 'combo',
itemId: 'cmbSearchTemplates',
name: 'searchTemplates',
fieldLabel: 'Search Templates',
emptyText: 'Select a Template',

hiddenName: 'selected_search_template',
displayField: 'searchTemplateDisplay',
valueField: 'searchTemplateValue',

mode: 'local',
triggerAction: 'all',
store: searchTemplateStore1
}
]
};
searchTemplateStore1.load();


I've also tried replacing the searchTemplateStore1 variable with the following Store code to see if that'll work. But, this code results in an error (also given below)



var searchTemplateStore1 = new Ext.data.JsonStore({
root: 'searchTemplates',
url: 'search/searchTemplate.json',
fields: ['searchTemplateValue', 'searchTemplateDisplay']
});




ext-all-debug.js
Line 5040
url is undefined
return url + (url.indexOf('?') === -1 ? '?' : '&') + s;

mberrie
15 Sep 2011, 9:13 PM
You are using Ext3 syntax. Better change to Ext4 syntax for class creation (use Ext.create() instead of 'new ...')

Where does the 'restful' property come from. Can't find it in the docs!?
If your server has a Rest Api, you might want to use the Ext.data.proxy.Rest proxy ( type: 'rest' )


Your config for proxy/writer is not nested correctly.

See this example:



var store = Ext.create('Ext.data.JsonStore', {
// ...
proxy: {
type: 'ajax',
url: 'get-images.php',
reader: {
type: 'json',
root: 'images',
idProperty: 'name'
}
}
});

cheetos007
16 Sep 2011, 12:11 PM
Thank you for your help !! That did it. I changed the syntax to match what's in the documentation, renamed the classes and it worked fine. Here's the updated code.



var searchTemplateModel = Ext.define(
'searchTemplateModel',
{
extend: 'Ext.data.Model',
fields: [
'searchTemplateValue',
'searchTemplateDisplay'
]
}
);
var searchTemplateStore = Ext.create(
'Ext.data.Store',
{
storeId: 'searchTemplateStore',
autoLoad: true,
model: 'searchTemplateModel',
proxy: {
type: 'rest',
url: 'search/searchTemplate.json',
reader: {
type: 'json',
root: 'dataRows'
}
}
}
);