Results 1 to 5 of 5

Thread: Mouse wheel scroll event on Combobox

  1. #1
    Sencha User SurenderBhyan1's Avatar
    Join Date
    Nov 2013
    Location
    INDIA
    Posts
    130
    Answers
    7

    Default Answered: Mouse wheel scroll event on Combobox

    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

    So, how we can add a mouse wheel event on combo. ?
    ---A ship in the harbor is safe, but that is not what the ships are made for...

  2. Modified fiddle code:

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

    Code:
    // 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);

  3. #2
    Sencha Premium User
    Join Date
    Mar 2011
    Posts
    287
    Answers
    35

    Default

    Modified fiddle code:

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

    Code:
    // 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);

  4. #3
    Sencha User SurenderBhyan1's Avatar
    Join Date
    Nov 2013
    Location
    INDIA
    Posts
    130
    Answers
    7

    Default It works fanstastic

    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.

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

    Working fiddle : https://fiddle.sencha.com/#fiddle/emc
    ---A ship in the harbor is safe, but that is not what the ships are made for...

  5. #4

    Join Date
    Sep 2008
    Posts
    140
    Answers
    4

    Default A more generic approach

    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
    Management means doing the things right,
    Leadership means doing the right things.
    www.interpid.eu

  6. #5
    Sencha User SurenderBhyan1's Avatar
    Join Date
    Nov 2013
    Location
    INDIA
    Posts
    130
    Answers
    7

    Default

    Quote Originally Posted by klodoma1 View Post
    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
    ---A ship in the harbor is safe, but that is not what the ships are made for...

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •