View Full Version : ComboBox : Options are looping on up/down key press.

22 Jul 2015, 1:45 AM
Hello All,

I have a ComboBox (sample code attached below) with three options to select from. Again, when I press the down arrow key on the drop down list the options are changing. What I want is when the last(3rd) option is selected and down arrow key is pressed the last(3rd) option should remain selected in spite of the first option(its looping back to the first option). Similarly when the first option is selected and up arrow key is pressed, I don't want EXT to select the last option but I want it to keep the first option selected. Please confirm if its is possible and how it can be done.

Thanx a lot.. :)

// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}

// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()

Gary Schlosberg
27 Jul 2015, 3:22 PM
Perhaps you could listen to the keyup (http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.form.field.ComboBox-event-keyup) and keydown (http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.form.field.ComboBox-event-keydown) events and cancel the move when appropriate.

27 Jul 2015, 8:30 PM
Thanx Gary for the response. I am not so sure as to how I can cancel the move when those event are triggered. Can you please help me. I have captured the keyup/keydown event. But dont know how to proceed.

Thanx again for all your help.:)