ExtJSに - 私はこのような何か見てカスタムコントロールを設計しています前/次ボタン

Question

とのコンボボックスをナビゲート：私は店の罰金をロードするコンボボックスを持っているが、私はしようとしているものを

を矢印を使用してコンボの次の値と前の値を選択します。私はコンボ上のvalueFieldをStoreからの "id"に設定しました。これはファッションで段階的ではありません。

私はこのような何か試してみた：問題は、コンボボックスのsetValue()は、「値」を必要とし、この場合には、私は単純なsetValue(currentValue + 1 [-1])、またはその何かをする必要があるということです

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

を自然。値がインクリメンタルでない場合、コンボをどのようにインクリメントしますか？

これは、selectNext()か何かの方法がコンボにあった場合、本当に簡単でしょう！

Answer 1

私はsetValue（）ではなくselect（）を使用することをお勧めします。以前のコンボボックスの項目を選択する

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

コード：：また、これらの機能を含めるようにExt.form.field.ComboBoxを拡張することができ

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.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 ]); 
      } 
     } 
    } 
}); 

次に、あなたのコード内の任意の場所にこれらのメソッドを使用することができます。たとえば、あなたはどのExt.form.field.Comboboxは、これら二つの方法を継承するよう、アプリケーションの起動（）関数でこのコードを配置することができます：

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