PDA

View Full Version : Loading selectfield from an external json file



riyaad
24 Nov 2011, 2:53 AM
Hi Sencha People

Is there a way to populate a select field by means of an external json file?



var store = Ext.create('Ext.data.Store', {
model: 'ListItems',
storeId: 'itemStore',
proxy: {
type: 'ajax',
url: 'itemList.json',
reader: {
type: 'json'
}
},
autoLoad: true
});


then doing ...



var item_ddn = new Ext.field.Select({
name: 'item_ddn',
label: 'Items Listed:',
store: store
});


How does one bind the the item_id to the item_name (as in the JSON below) and list it?

JSON code...



[
{
"item_id" : "113",
"item_name" : "Metro Goldwyn Mayer"
},
{
"item_id" : "106",
"item_name" : "M-Net Action"
}
]


**Appreciated**

mitchellsimoens
24 Nov 2011, 9:06 AM
Set the valueField config to 'item_id' and the displayField config to 'item_name' on your Select field. I would also set the idProperty on your Model to 'item_id' and you should have things setup pretty well. One last thing instead of doing 'new Ext.field.Select', you should do the ST2 way and do "Ext.create('Ext.field.Select' "

riyaad
25 Nov 2011, 12:47 AM
Hi Mitchell Simoens,

Brilliant - thank you again. I did some more reading, had some more coffee ~o) and trial'n error :D sessions and got it working nicely ...

Here's the code (for anyone else out there looking for this) ... pretty straight forward once you get the hang of it.


Ext.application({
name: 'Dynamic Menu',


launch: function() {


Ext.define('MenuItems', {
extend: 'Ext.data.Model',
idProperty: 'item_id',
fields: [
{name: 'item_id', type: 'string'},
{name: 'item_name', type: 'string'}
]
});


var store = Ext.create('Ext.data.Store', {
model: 'MenuItems',
storeId: 'MenuStore',
proxy: {
type: 'ajax',
url: 'menu.json',
reader: {
type: 'json'
}
},
autoLoad: true
});


var bundle_ddn = Ext.create('Ext.field.Select', {
name: 'item_ddn',
label: 'Bouquet:',
valueField: 'item_id',
displayField: 'item_name',
store: store
});


var formBase = {
scroll: 'vertical',
title: 'Settings',
items: [ bundle_ddn ]
};


Ext.create('Ext.tab.Panel', {
fullscreen: true,
items: [ formBase ]
});


}
});


Regards,
Riyaad

riyaad
25 Nov 2011, 1:23 AM
PS: Does anyone know if this has been resolved?
http://www.sencha.com/forum/showthread.php?111532-Select-field-to-no-selection.

I'm assuming there's yet to be a fix for STv2 as I'm getting the same behavior...