View Full Version : Combobox selected value

9 Mar 2010, 12:20 AM

I am using combobox and I would like to get the selected value of a selected element. Example code will explain the problem:

var store = new Ext.data.ArrayStore({
fields: ['id', 'value']

store.loadData([[10, "data1"],
[20, "data2"],
[30, "data3"]

var statusCombo = new Ext.form.ComboBox({
store: store,
displayField: 'value',
typeAhead: true,
mode: 'local',
selectOnFocus: true,
fieldLabel: 'Status',
width: 300,
editable: false

var val = statusCombo.getValue(); //gets 'data1','data2' or 'data3'

What I want, is to get the value that corresponds to displayed text of selected item. I cannot used property selectedIndex because, index does not correspond to the id value in data store.

help will be appreciated.


9 Mar 2010, 12:46 AM
you did not set the "valueField"-config, so the combo knows only the displayed-value.

kind regards,

9 Mar 2010, 3:55 AM
Oh, I've omitted id accidentally. One more question if I may: How to add empty element to be the first element in combo? Adding row with empty displayValue to store, adds combobox entry with empty displayValue but this row's height is much smaller than the rest of the rows.

9 Mar 2010, 4:11 AM
to be honest, i don't know an easy way to do it.

you could try to set a lineHeight-css for the elements inside the view or create a custom template (tpl-config) that is specified to your needs.

kind regards,

9 Mar 2010, 4:31 AM
my sample code....
val = your selected value come here
new Ext.form.ComboBox({
id: 'id_state-ship',
fieldLabel: 'Zone',
typeAhead: true,
name: 'state_ship',
store: zoneList_store,
displayField: 'zonename',
triggerAction: 'all',
valueField: 'zonename',
forceSelection: true,
editable: false,
allowBlank: false,
mode: 'local',
emptyText: 'Select a state',
loadingText: 'Loading States..',

9 Mar 2010, 4:57 AM
Okay, I found myself a perfectly suitable solution. I just add &nbsp as display value in the first row.

Thanks for help (very quick).
Regards, Peter.