View Full Version : How to select the first list item on a ComboBox?

31 Aug 2007, 7:54 AM
I have a non-editable ComboBox which displays a list of users and "Go" button next to it. Under normal circumstances the user is prompted to select an option from the list and press the "Go" button. However, under certain conditions I need to automatically select the first item on the list and programmatically press the "Go" button. I've got the button pressing sorted, but can't seem to select the first item on the list?

Using the Ext.form.ComboBox.setValue() method I can select the first item programmatically no problem, e.g.,


but the problem is that the list of users is dynamic and I won't know what the Id is of the first user on the list. I looked in the docs and it seemed as though Ext.form.ComboBox.select(index) should do the job by using .select(0) but only if the "store [is] loaded and the list expanded". Well the items have been successfully added to the list so I'm assuming the store has been loaded, but calling Ext.form.ComboBox.expand() seems to have no effect. This appears to be because in ext-all.js, line 200, the definition for expand() returns when:


and in my case !this.hasFocus is true even though the element doesn't have focus.

Help! I just want to pick the first list item!

31 Aug 2007, 8:14 AM
Take a look at SelectBox (http://extjs.com/forum/showthread.php?t=6392) which has a selectFirst() function. Example here: http://crepitus.com/misc/ext/combo.html

Troy Wolf
25 Sep 2007, 10:42 AM
staticboy, did you get a solution worked out? This does seem like it should be simple, but I too am struggling to "simply" auto-select the first option in the ComboBox.

I don't understand why I can't simply use the ComboBox's select() method. It seems that if I call myCombo.select(0, true), the first item should be selected and the display should represent this.

Now, I'm dynamically loading my ComboBox using a "local" JsonStore. I'm doing something like:

myCombo.select(0, true);

This did not work, so I says to myself, "Of course this does not work. The load is asynchronous. You'll have to do your select(0, true) onload of the store." So I try:

myCombo.store.on('load', myCombo.select(0, true));

This gives me a javascript error:

E.fireFn has no properties

fay, I'm actually using the custom SelectBox, but the selectFirst() method is causing strange behaviour. My guess is that it actually fires the onselect event (unlike the ComboBox.select() method). Because I have two comboboxes that both affect the other onselect, auto-firing the select method causes a chain reaction.

25 Sep 2007, 11:00 AM
Per the doc, the combo has to be expanded for select to do that. Is this the case? If not, use setValue with the value from row 0 in the store.

Troy Wolf
25 Sep 2007, 11:17 AM
Per the doc, the combo has to be expanded for select to do that. Is this the case? If not, use setValue with the value from row 0 in the store.

Thanks for the tips, tryanDLS. It does appear that setValue() or perhaps even setRawValue() is more what I need. However, the index 0 value is unknown to me. It is loaded dynamically. So I need a way to tell the combobox to select the first option--whatever that option is. And I need this to happen whenever that combobox is reloaded.

Troy Wolf
25 Sep 2007, 11:38 AM
Solution...finally. In this code example, myDataColumn is a field name in my data store--the same field that I use as my ComboBox display value.

// I tell my second ComboBox that whenever you load,
// select your first value automatically.
myCombo2.store.on('load', function(){
myCombo2.setValue(myCombo2.store.collect('myDataColumn', true)[0]);

// I load my first ComboBox from the server.

// I tell my first ComboBox that when the user selects a value,
// reset and reload the second ComboBox.
// Oh, and pass the value of the first combo to the script
// that loads the second combo. This way, we only load
// values that are applicable.
myCombo1.on('select', function(){

25 Sep 2007, 3:23 PM
I do it the same way, just with slightly different syntax:


Troy Wolf
26 Sep 2007, 5:56 AM
Thanks, devnull! That is more elegant than my solution, and it teaches me what objects are passed to the load event. (Of course I could have figured that out using Firebug.)

One thing I did learn is that in my particular case, sometimes there are not any records in my store--depends on what is selected. My solutions just works. Your solution gives a javascript error about accessing records[0] when no records exist. Easy to work-around of course--just test before trying.


8 Nov 2007, 1:26 AM
and with a hard-coded store I do this


1 Feb 2010, 9:56 PM
thanks for tips,devnull!