PDA

View Full Version : Configuring multiple combos from single json store?



smick
16 Feb 2011, 3:26 PM
Hey Guys,

I have an app with a ton of combo boxes and ideally I would only have to make one call to the server to configure them. How would i go about achieving this?

Would it be a matter of retrieving all the data in one store, then setting up individual stores for each combo box that would feed off of the config store?

Or would I feed the combo boxes the section of the config array that it needs?

Are there any examples of this sort of scenario?

Thanks for any help.

S.

darthwes
16 Feb 2011, 9:54 PM
You'd probably just make a single store with autoLoad, but suffice it to say you must load it, initially. Then you'd set mode: 'local' to your combo box and pass it the store. The combo is only holding a selection, your store remains unchanged. You're right that you'd only use one store, the "trick" is just using mode: 'local' in your combo configs so that they don't ask the store to load.

smick
16 Feb 2011, 10:03 PM
I have 2 stores I need.

1. combo box options
2. default form data (combo selections)

is it possible to just grab 17 combo boxes worth of combo values, feed them to the individual combo boxes?

I don't know how to do this with extjs data stores. I know how it would be done with simple json data, I would just seed the combo options to the combo box using dot notation e.g. config.combo1.options

smick
17 Feb 2011, 10:28 AM
Well, this is the pseudocode for what I'm trying to achieve:



Ext.onReady(function(){

var config = new Ext.data.JsonStore({
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: "search-config.php"
}),
root: 'data'
});

var combo1_store = new Ext.data.JsonStore({
autoLoad: true,
data: config,
root: 'direction_status',
fields: [
'displayText', // numeric value is the key
'value'
]
});

var combo1 = new Ext.form.ComboBox({

name: 'some_combo',
triggerAction:'all',
forceSelection:true,
editable: false,
emptyText: 'Empty Text',
mode: 'local',
store: combo1_store,
displayField: 'displayText'
});

combo_page = new Ext.Panel({
title: 'hello world',
items: [combo1],
renderTo:document.body
});
});


And my JSOn data (this can change if needed)



{
config = {

"success": true,
"data": [{

"search_filters": [{
"primary":[{
"direction_status":[{
"combo option 1": "1",
"combo option 2": "2"
}],
"date":[{
"Today": "1",
"Yesterday": "2",
"This Week": "3",
"Last Week": "4",
"This Month": ""5,
"Last Month": "6",
"2 Months ago": "7",
"3 Months ago": "8",
"4 Months ago": "9"
}]
}]
}]

}]
}
}

smick
17 Feb 2011, 10:31 AM
This would be the ideal approach in my mind, as it wouldn't require multi0ple stores chained off of one:




Ext.onReady(function(){

var config = new Ext.data.JsonStore({
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: "search-config.php"
}),
root: 'data'
});

var combo1 = new Ext.form.ComboBox({

name: 'some_combo',
triggerAction:'all',
forceSelection:true,
editable: false,
emptyText: 'Empty Text',
mode: 'local',
store: config.search_filters.primary.direction_status,
displayField: 'displayText'
});

var combo_page = new Ext.Panel({
title: 'hello world',
items: [combo1],
renderTo:document.body
});
});

darthwes
17 Feb 2011, 3:50 PM
Yeah, you can do that. I'd consider dropping the store entirely and just doing an ajax request...I'd spawn the app off on the success handler of it. That's just me, maybe. You'd do



{
xtype: 'combo',
mode: 'local',
triggerAction: 'all',
store: [[0, 'Opt 1'], [1, 'Opt 2'], [2, 'Opt 3']]


with a few complications, like decoding the response appropriately, but I know this solution solves this problem.