Question

我正在设计一个自定义控件，看起来像这样： enter image description here

我已经让ComboBox加载Store很好，但我想要做的是使用箭头选择Combo中的下一个和上一个值。我已将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);

问题是ComboBox上的setValue()需要“值”，在这种情况下，我需要做一个简单的setValue(currentValue + 1 [-1])，或者那种性质的东西。当值不是增量值时，如何增加组合？

如果Combo上有selectNext()或其他方法，这将非常简单！

Answer 1

想出来。：）

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

Answer 2

我更喜欢使用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以包含这些功能（稍作更改）。例如，您可以将此代码放在应用程序的launch（）函数中，以便任何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

ExtJS - 使用上一个/下一个按钮浏览ComboBox

2 个答案: