ExtJS的 - 瀏覽帶有上/下一個按鈕，組合框

Question

我設計一個自定義的控制，是這個樣子：

我已經得到了ComboBox加載存儲罰款，但我正在努力do是使用箭頭來選擇組合中的下一個和上一個值。我已經將Combo上的valueField設置爲Store中的「id」，它們不是時尚的增量。

我已經試過這樣的事情：

// this gets the current record 
    var currentBanner = this.bannersComboBox.getStore().getById(this.bannersComboBox.getValue()); 

    // this gets the current records index in the store 
    var currentStoreIndex = this.bannersComboBox.getStore().indexOf(currentBanner); 

的問題是，setValue()在組合框需要「價值」，在這種情況下，我需要做的只是一個簡單的setValue(currentValue + 1 [-1])，或某事性質。如果值不是遞增的，你將如何遞增組合？

如果在組合上有selectNext()或其他方法，這將非常簡單！

Answer 1

我更喜歡使用select（）而不是setValue（）。下面的代碼選擇下一個組合框項目：

function comboSelectNextItem(combo, suppressEvent) { 
    var store  = combo.getStore(); 
    var value  = combo.getValue(); 
    var index  = store.find(combo.valueField, value); 
    var next_index = index + 1; 
    var next_record = store.getAt(next_index); 
    if(next_record) { 
     combo.select(next_record); 

     if(! suppressEvent) { 
      combo.fireEvent('select', combo, [ next_record ]); 
     } 
    } 
} 

代碼，選擇前一個組合框項目：

function comboSelectPrevItem(combo, suppressEvent) { 
    var store  = combo.getStore(); 
    var value  = combo.getValue(); 
    var index  = store.find(combo.valueField, value); 
    var prev_index = index - 1; 
    var prev_record = store.getAt(prev_index); 
    if(prev_record) { 
     combo.select(prev_record); 

     if(! suppressEvent) { 
      combo.fireEvent('select', combo, [ prev_record ]); 
     } 
    } 
} 

您還可以擴展Ext.form.field.ComboBox包括那些功能（含有少量變化）。例如，您可以將此代碼放在應用程序的推出（）函數，因此任何Ext.form.field.Combobox繼承了這兩種方法：

Ext.define("Ext.form.field.ComboBoxOverride", { 
    "override": "Ext.form.field.ComboBox", 

    "selectNextItem": function(suppressEvent) { 
     var store  = this.getStore(); 
     var value  = this.getValue(); 
     var index  = store.find(this.valueField, value); 
     var next_index = index + 1; 
     var next_record = store.getAt(next_index); 
     if(next_record) { 
      this.select(next_record); 

      if(! suppressEvent) { 
       this.fireEvent('select', this, [ next_record ]); 
      } 
     } 
    }, 

    "selectPrevItem": function(suppressEvent) { 
     var store  = this.getStore(); 
     var value  = this.getValue(); 
     var index  = store.find(this.valueField, value); 
     var prev_index = index - 1; 
     var prev_record = store.getAt(prev_index); 
     if(prev_record) { 
      this.select(prev_record); 

      if(! suppressEvent) { 
       this.fireEvent('select', this, [ prev_record ]); 
      } 
     } 
    } 
}); 

然後，你可以在你的代碼的任何地方使用這些方法：

var combo = ...   // the combo you are working on 
combo.selectNextItem(); // select the next item 
combo.selectPrevItem(); // select the previous item 

Answer 2

想通了。 :)

var currentBanner = this.bannersComboBox.getStore().getById(this.bannersComboBox.getValue()); 
var currentStoreIndex = this.bannersComboBox.getStore().indexOf(currentBanner); 
var nextBannerValue = this.bannersComboBox.getStore().getAt(currentStoreIndex + 1).get('id') 
this.bannersComboBox.setValue(nextBannerValue);