PDA

View Full Version : Mouse wheel scroll event on Combobox



SurenderBhyan1
5 Dec 2014, 6:27 AM
Description:

I want to add a mouse wheel scroll event on combo box. My requirement is that, once an option is selected from combo box, then scroll on the combo box using the mouse wheel, the next/previous option should be the selected. I don't want to expand the combo box again and again.

Here is the fiddle: https://fiddle.sencha.com/#fiddle/ei6
(https://fiddle.sencha.com/#fiddle/ei6)
So, how we can add a mouse wheel event on combo. ?

chamacs
6 Dec 2014, 4:48 PM
Modified fiddle code:

Saved a copy here: https://fiddle.sencha.com/#fiddle/el6


// The data store containing the list of statesvar states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"A", "name":"Option 1"},
{"abbr":"B", "name":"Option 2"},
{"abbr":"C", "name":"Option 3"},
{"abbr":"D", "name":"Option 4"},
{"abbr":"F", "name":"Option 5"},
{"abbr":"G", "name":"Option 6"},
{"abbr":"H", "name":"Option 7"},
{"abbr":"I", "name":"Option 8"},
{"abbr":"J", "name":"Option 9"}
]
});


// Create the combo box, attached to the states data store
var combo = Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose Option',
store: states,
queryMode: 'local',
displayField: 'name',
style: 'margin-top: 50px',
valueField: 'abbr',
renderTo: Ext.getBody(),
editable : false,
onMouseWheel : function(e) {
var value = this.getValue();
if (value) {
var store = this.getStore();
var recordIndex = store.find('abbr', value);
if (recordIndex >= 0) {
var delta = e.getWheelDelta();
if (delta > 0) {
recordIndex = recordIndex == 0 ? recordIndex : recordIndex - 1;
}
else {
recordIndex = recordIndex + 1 > store.count() ? recordIndex : recordIndex + 1;
}
var record = store.getAt(recordIndex);
this.setValue(record.get('abbr'));
}
}
}
});


// Attach mousewheel event
combo.mon(combo.bodyEl, 'mousewheel', combo.onMouseWheel, combo);

SurenderBhyan1
8 Dec 2014, 7:07 AM
Thanks a lot Chamacs, It works fantastic for me , but I modified a little bit of your code.

we need to replace greater than operator with greater and Equal to otherwise it was throwing console error if we scroll after Option 9.


else { recordIndex = recordIndex + 1 > store.count() ? recordIndex : recordIndex + 1; }


else { recordIndex = recordIndex + 1 > = store.count() ? recordIndex : recordIndex + 1; }


Working fiddle : https://fiddle.sencha.com/#fiddle/emc

klodoma1
25 Feb 2015, 1:49 AM
I've posted here a more generic approach of the upper solution.
For some reason under Extjs5 in firefox is not working.

https://fiddle.sencha.com/#fiddle/ion

SurenderBhyan1
25 Feb 2015, 2:58 PM
I've posted here a more generic approach of the upper solution.
For some reason under Extjs5 in firefox is not working.

https://fiddle.sencha.com/#fiddle/ion

Thank you Klodoma for sharing your approach. appriciated =D>