ExtJS: Adding spinner to combobox - extjs

Question

I need/would like to add a spinner (up and down arrows) to an Ext JS (6.6.0) Ext.form.field.ComboBox. Something like this:
The requirement is to keep the combobox functionality but also add the possibility to step through the list step by step.
I have to admit that I am quite new to Ext JS. I did some research and went through the Ext JS documentation a bit but I still have no clear idea how to best implement this.
Can anybody suggest something?

Answer 1

The easiest solution to your problems would be to add triggers.
This is the same technique that the combobox is using to apply a "trigger" (button) to the field.
Triggers have a handler config in which you can access (on user click) the combobox. From there you can easily access the current value and the store to get all the information you need to set the "next" or "last" value in relation to the values store position.
Here is a working live example: sencha fiddle
Here is a code example:
// 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(),
triggers: {
spinner: {
type: 'spinner',
upHandler: function () {
const me = this,
position = me.getValue() ? me.getStore().indexOf(me.findRecordByValue(me.getValue())) - 1 : -1;
if (position >= 0) {
let newValue = me.getStore().getAt(position).get(me.valueField);
if (newValue) {
me.setValue(newValue);
}
}
},
downHandler: function () {
const me = this,
position = me.getValue() ? me.getStore().indexOf(me.findRecordByValue(me.getValue())) + 1 : 0;
if (position < me.getStore().getRange().length) {
let newValue = me.getStore().getAt(position).get(me.valueField);
if (newValue) {
me.setValue(newValue);
}
}
}
}
}
});