PDA

View Full Version : Unable to load the data from json into the store to make a dyanamic combobox



smrita
25 Aug 2015, 12:54 AM
This is the code for the view


var projectDropDown = new Ext.data.Store({ autoLoad: true, url: 'dropdown.json', storeId: 'projectDropDown', reader: new Ext.data.JsonReader( { root: 'projects' }), idProperty: 'ProjectID', fields: [ 'ProjectID', 'ProjectName' ]});and my json looks like this


"projects" : [ {"ProjectID":"1","ProjectName":"Mike's Test Project"}, {"ProjectID":"2","ProjectName":"My Second Test Project"}, .... ]}

smrita
25 Aug 2015, 12:56 AM
Pls help as I am new to ext js

jdkhamba
25 Aug 2015, 6:17 PM
Your probably want to post some more code before someone can help you. But for starters, "new" keyword is probably not a good idea with Ext 4.x. Use Ext.create() instead. Also make sure queryMode is 'remote' and not local while defining the combo box in case you have explicitly mentioned it in the combo config. Make sure both displayField and valueField are configured properly.

smrita
25 Aug 2015, 8:38 PM
Thanks for replying!!
This is the whole code which I am trying-

xtype: 'combobox', name: 'combo', fieldLabel: t('combo'),

valueField : 'ProjectID',
displayField : 'ProjectName',
store: new Ext.data.JsonStore({
autoLoad: true,
url: 'js/json/dropdown.json',
reader: new Ext.data.JsonReader(
{
root: 'projects'
}),
idProperty: 'ProjectID',
fields: [ 'ProjectID', 'ProjectName' ]}),

typeAhead: true,
queryMode : 'remote',
triggerAction: 'all',
selectOnFocus:true,

jdkhamba
26 Aug 2015, 4:09 AM
The store is not configured correctly as far as syntax s concerned. Try this :


var comboStore = Ext.create('Ext.data.Store', {
autoLoad: true,
proxy: {
type: 'ajax',
url: 'js/json/dropdown.json',
reader: {
type: 'json',
root: 'projects'
}
},
idProperty: 'ProjectID',
fields: ['ProjectID', 'ProjectName']

});


var combo = {
xtype: 'combobox',
name: 'combo',
valueField: 'ProjectID',
displayField: 'ProjectName',
typeAhead: true,
queryMode: 'remote',
triggerAction: 'all',
selectOnFocus: true,
store:comboStore
}

mitchellsimoens
27 Aug 2015, 1:41 AM
But for starters, "new" keyword is probably not a good idea with Ext 4.x. Use Ext.create() instead.

Nothing wrong with using the new keyword so long as the class is already loaded. In fact, the new keyword is much more performant.


Also make sure queryMode is 'remote' and not local while defining the combo box in case you have explicitly mentioned it in the combo config.

remote is default for queryMode.

smrita
27 Aug 2015, 3:27 AM
Thanks for the help!!

smrita
27 Aug 2015, 4:38 AM
I am able to populate the data!! Thanks alot :)
But I am facing another issue . My drop down should display only two values but it is displaying empty items also alongwith the two values . Pls help!!