ExtJS - навигация по ComboBox с помощью кнопок «предыдущий / следующий»

Question

Я разрабатываю пользовательский элемент управления, который будет выглядеть примерно так:

У меня есть ComboBox, который прекрасно загружает Store, но я пытаюсь использовать стрелки для выбораследующие и предыдущие значения в Combo.Я установил valueField на Combo как «id» из Магазина, который не является инкрементным по моде.

Я пробовал что-то вроде этого:* Проблема в том, что setValue() в ComboBox требует "значение", и в этом случае мне нужно просто сделать простой setValue(currentValue + 1 [-1]) или что-то в этом роде.Как бы вы увеличили комбо, если значения не являются инкрементными?

Это было бы действительно легко, если бы в комбо был метод 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