PDA

View Full Version : Combo Box non-standard behavior for arrow down.



igoberman
3 Dec 2012, 7:05 AM
Hello, I have encountered a behavior in Combo Box that is different from 'normal' html combo boxes: when arrow down is pressed, the ExtJs Combo Box opens pop up instead of selecting next item (while keeping popup closed). Is there a way to override this? I searched forums, but could not find an answer.
Thanks for the help!

mitchellsimoens
5 Dec 2012, 11:35 AM
Override the onDownArrow method of the combobox in your own class.

igoberman
5 Dec 2012, 2:29 PM
Mitchell, thanks for the reply. I have managed to implement this functionality in the code below. This feels like reinventing the wheel because this is a standard behavior that should have been handled by the ExtJS framework (actually I do not get why it is different in the first place). Could you consider introducing a config property that will enable this functionality.

On a separate note, I have a Form with this widget. I want to set a focus to it when the Frame opens. However, if I set focus timeout too short (10 instead of 100) the Combo gets focus visually, but pressing arrow keys do not trigger 'keydown' event. Is it some bug? Or there is a better way to set initially focused widget for a Form?
Thanks



Ext.widget('form', ...
................
listeners: {
afterRender: function (thisForm, options) {
me.orderTypeField = me.form.query('#orderType')[0];
me.orderTypeField.focus(true, 100);
}
.......................




Ext.define('activ.control.extjs.ComboBoxEx', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.comboboxex',
enableKeyEvents: true,

onDownArrow: function (e) {
},

handleArrowUp: function () {
var v = this.getValue();
var record = this.getStore().findRecord(this.valueField || this.displayField, v);
var selectionIndex = this.getStore().indexOf(record);
if (selectionIndex !== -1) {
var nextRecord = this.getStore().getAt(selectionIndex - 1);
if (typeof nextRecord !== 'undefined') {
this.setValue(nextRecord.get(this.valueField || this.displayField));
}
}
},

handleArrowDown: function () {
var v = this.getValue();
var record = this.getStore().findRecord(this.valueField || this.displayField, v);
var selectionIndex = this.getStore().indexOf(record);
if (selectionIndex === -1) {
selectionIndex = 0;
}
var nextRecord = this.getStore().getAt(selectionIndex + 1);
if (typeof nextRecord !== 'undefined') {
this.setValue(nextRecord.get(this.valueField || this.displayField));
}
},

initComponent: function () {
this.callParent(arguments);
var me = this;
this.on('keydown', function (control, e, eOpts) {
switch (e.keyCode) {
// key up
case 38:
me.handleArrowUp();
break;
// key down
case 40:
me.handleArrowDown();
break;
}
});
}
});