ExtJS - 使用 prev/next 按钮在 ComboBox 中导航答案

【问题标题】：ExtJS - Navigate through ComboBox with prev/next buttonsExtJS - 使用 prev/next 按钮在 ComboBox 中导航
【发布时间】：2011-08-04 15:20:30
【问题描述】：

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

我已经让 ComboBox 加载 Store 很好，但我想做的是使用箭头选择 Combo 中的下一个和上一个值。我已将 Combo 上的 valueField 设置为商店中的“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() 或其他方法，这将非常容易！

【问题讨论】：

谢谢！一旦我弄清楚了一些怪癖，我将尝试将其制成自定义组件。

标签： extjs combobox

【解决方案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);

【讨论】：

【解决方案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

【讨论】：