Extjs如何滾動到組合框中的選定項目展開

我是Extjs的新手，所以請幫助我解決這個問題，即使聽起來很容易。我有一個組合框，我希望它顯示所選項目的區域，只要它展開。我的代碼看起來像下面：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只是爲了您的信息。非常感謝您的時間和關注

來源

2014-03-13 user3414275

試試這個:(添加一個監聽器afterrender）到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'); 
    } 
} 
});

來源

2014-03-16 18:26:56

我發現基於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); 
     } 

     },

來源

2015-05-11 09:48:38

要擴大Alex Dzeiko answer，而不是jQuery的，我們可以使用：

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

或（使用有些未記錄的特性/功能）

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

完整示例

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

這也爲我工作
我們需要在組合框中設置autoSelect = true（默認設置）這個工作。

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

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

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

注意
的Ext JS已經選擇默認情況下，適當的項目，我需要這個代碼顯示出類似的用戶輸入什麼項目，而不是顯示的第一個項目（上面的代碼並不反映這整個解決方案）。

來源

2015-08-28 12:12:15 PLopes

Extjs如何滾動到組合框中的選定項目展開

回答

相關問題