PDA

View Full Version : Load combo from data



TheBigOnion
21 Sep 2010, 10:33 AM
Hello,
I am not too sure how to ask this, so I'll just try. :D

I have a set of data something like this:
Many Levels, and each level has many colors.


high: blue, green, orange
,mid: yellow, green
,low: white, blue, purple, orange, yellow
In my PHP code, I can put this data in any format I need. I was thinking of spitting it out as a multidimensional array into my JavaScript.

Anyhow, I want to have two comboboxes. One will have the levels, then when the user selects a level, it will fill the second combobox with the associated colors.

Can someone please tell me how to do this? I am currently using the Ext.formComboBox for the levels. It works fine, but now I have the new requirement to add the colors.

Oh, and I wanted to try to do this without hitting another PHP page. In other words, bring all my data down to the javascript when the page is loaded.


Thank you.

troseberry
21 Sep 2010, 10:44 AM
It sounds like you need a cascading combobox.

TheBigOnion
21 Sep 2010, 11:05 AM
It sounds like you need a cascading combobox.

No I don't. I need to know how to set up my data using ExtJs. Some kind of data store? Array store? Json?

darthwes
21 Sep 2010, 11:23 AM
I was going to answer you, then you lashed out at someone offering help. Good luck.

troseberry
21 Sep 2010, 11:36 AM
Anyhow, I want to have two comboboxes. One will have the levels, then when the user selects a level, it will fill the second combobox with the associated colors.

Can someone please tell me how to do this? I am currently using the Ext.formComboBox for the levels. It works fine, but now I have the new requirement to add the colors.


This seems to fit every definition I can think of for a cascading dropdown/combobox.

I would load the data into 2 different data stores. One with the levels and the other with the colors. Then setup a combo that is mapped to the corresponding store. Setup a select listener on the first store and filter the second's store based on the value selected.

TheBigOnion
21 Sep 2010, 11:46 AM
Do you know where I can find an example of that?

troseberry
21 Sep 2010, 12:55 PM
Heres a very simple example. You can also check out http://www.sencha.com/learn/Tutorial:Linked_Combos_Tutorial_for_Ext_2



Ext.onReady(function(){
Ext.QuickTips.init();

var levels = [
['High'],
['Mid'],
['Low']
];

var colors = [
[1, 'High', 'Green'],
[2, 'High', 'Blue'],
[3, 'High', 'Orange'],
[4, 'Mid', 'Yellow'],
[5, 'Mid', 'Green'],
[6, 'Low', 'White'],
[7, 'Low', 'Purple'],
[8, 'Low', 'Blue'],
[9, 'Low', 'Orange'],
[10, 'Low', 'Yellow']
];

var example = new Ext.FormPanel({
labelWidth: 75,
frame:true,
title: 'Form',
renderTo: Ext.getBody(),
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'combo',
items: [{
fieldLabel: 'Level',
store: new Ext.data.SimpleStore({
fields:['level'],
data: levels
}),
displayField:'level',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText:'Select a level...',
selectOnFocus:true,
listeners:{
select:{
fn: function(combo, value) {
var comboCity = Ext.getCmp('color-combo');
comboCity.clearValue();
comboCity.store.filter('level', combo.getValue());
}
}
}
},
{
fieldLabel: 'Color',
id: 'color-combo',
store: new Ext.data.SimpleStore({
fields:['id', 'level', 'color'],
data: colors
}),
displayField:'color',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText:'Select a Color...',
selectOnFocus:true,
lastQuery:''
}]
});
});

Animal
21 Sep 2010, 11:57 PM
Anyhow, I want to have two comboboxes. One will have the levels, then when the user selects a level, it will fill the second combobox with the associated colors.

The very definition of "cascading comboboxes"