Extjs 확장시 콤보 상자에서 선택한 항목으로 스크롤하는 방법

Question

Extjs에 익숙하지 않으므로 쉽게 들리 겠지만이 문제에 대해 친절하게 도와주세요. 확장 할 때마다 선택한 항목의 영역을 표시하려는 콤보 상자가 있습니다. 그것은 항상 선택한 항목이 바닥에서 일하지만 확장에 최고 기록을 표시

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 
    } 
} 

: 아래와 같은 내 코드 보인다. 여러 가지 방법을 시도했지만 비 효과적입니다. 귀하의 정보를 위해서 Ext 4.2.1을 사용하고 있습니다. 시간과 관심에 진심으로 감사드립니다.

Answer 1

다음을 시도해보십시오. (청취자를 추가 한 후) sencha 문서에있는 내용을보십시오.

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'); 
    } 
} 
}); 

Answer 2

내가 발견 ExtJS를 기반으로 솔루션 4.2.1 + jQuery를 (당신은 바닐라 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 3

대신 jQuery를의 우리가 사용할 수 Alex Dzeiko answer을 확장하려면

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

또는 (다소 명시되지 않은 부동산/기능 사용)

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

이것은 또한 나 우리는이 작업을 수행하려면 콤보 상자에 autoSelect = true (기본 설정)를 설정해야
근무

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); 
    } 
    }, 

전체 예제.

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

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

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

주
는 내선 JS 이미 기본적으로 적절한 항목을, 내가 대신 첫 번째 항목을 보여주는에, 사용자가 입력 한 내용과 유사한 항목을 표시하려면이 코드를 필요로 선택 ​​(위의 코드는 반영되지 않습니다 이 전체 솔루션).