Extjs How to scroll to selected item in a combo box on expand

Question

I am new to Extjs so please kindly help me out on this issue even though it may sound easy. I have a combo box which I want it to display the area of the selected items whenever it is expanded. My code looks like below:

xtype: 'combo',
id: 'hdpbox',
store: storeNumber, 
queryMode: 'local',
forceSelection: true,
selectOnFocus: true,
displayField: 'display',
valueField: 'value',
listeners: {
  expand: function(){
  //Some functions will go here in order to show where the selected item in the list
  }
}

It always display the top records on expanding although the selected item is the one from the bottom. I have tried many ways but non have worked out. I am using Ext 4.2.1 just for your info. Thank you very much for you time and concern

Answer 1

I found solution based on ExtJs 4.2.1 + jQuery (you can use vanilla js):

      expand: function(combo) {
        var val = combo.getValue();

        if (val !== null) {
          var rec = combo.findRecordByValue(combo.getValue()),
            node = combo.picker.getNode(rec);

          $(combo.picker.listEl.dom).scrollTop($(combo.picker.listEl.dom).scrollTop() + $(node).position().top);
        }

      },

Answer 2

To expand on Alex Dzeiko answer, instead of jQuery we can use:

combo.picker.getTargetEl().setScrollTop(node.offsetTop);

or (using a somewhat undocumented propertie/function)

combo.picker.listEl.scrollChildIntoView(node, false);

Complete example

expand: function(combo) {
    var val = combo.getValue();

    if (val !== null) {
      var rec = combo.findRecordByValue(combo.getValue()),
        node = combo.picker.getNode(rec);

      combo.picker.getTargetEl().setScrollTop(node.offsetTop);
    }
  },

This also worked for me
We need to set autoSelect = true (the default setting) on the combo box for this to work.

expand: function(combo) {
    var val = combo.getValue();

    if (val !== null) {
      var rec = combo.findRecordByValue(val);

      combo.picker.getSelectionModel().lastSelected = rec;
    }
  },

Note
Ext JS already selects the proper item by default, I needed this code to show a item similar to what the user typed, instead of showing the first item (the code above does not reflect this entire solution).

Answer 3

Try this: (added a listener afterrender) to what is in sencha docs.

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(),
listeners: {
    scope: this,
    'afterrender': function(combo) {
        debugger;
        combo.setValue('AZ');
    }
}
});