Рендеринг предлагаемых значений из Ext Combobox в элемент в DOM

Question

У меня есть ext combobox, который использует хранилище, чтобы предлагать пользователю значения при вводе.

Пример, который можно найти здесь: Пример комбинированного списка

Есть ли способ сделать так, чтобы предлагаемый текстовый список отображался в элемент в DOM. Обратите внимание, что я не имею в виду параметр конфигурации applyTo, так как это отразило бы весь элемент управления, включая текстовое поле для элемента DOM.

Answer 1

@ Квай

Еще одна вещь, которую следует учитывать, это то, что initList не является частью API. Этот метод может исчезнуть или поведение может значительно измениться в будущих версиях Ext. Если вы никогда не планируете обновление, вам не о чем беспокоиться.

Answer 2

Вы можете использовать плагин для этого, так как вы можете вызывать или даже переопределять приватные методы из плагина:

var suggested_text_plugin = {

    init: function(o) {

        o.onTypeAhead = function() {
            // Original code from the sources goes here:

            if(this.store.getCount() > 0){
                var r = this.store.getAt(0);
                var newValue = r.data[this.displayField];
                var len = newValue.length;
                var selStart = this.getRawValue().length;
                if(selStart != len){
                    this.setRawValue(newValue);
                    this.selectText(selStart, newValue.length);
                }
            }

         // Your code to display newValue in DOM
         ......myDom.getEl().update(newValue);
        };
    }
};


// in combobox code:

var cb = new Ext.form.ComboBox({
    ....
    plugins: suggested_text_plugin,
    ....
});

Я думаю, что даже возможно создать целую цепочку методов, вызывая оригинальный метод до или после вашего, но я еще не пробовал это.

Также, пожалуйста, не настаивайте на том, чтобы я использовал нестандартное определение плагинов и методики вызова (недокументированные). Это просто мой взгляд на вещи.

EDIT:

Я думаю, что цепочка методов может быть реализована примерно так (не проверено):

....
o.origTypeAhead = new Function(this.onTypeAhead.toSource());
// or just
o.origTypeAhead = this.onTypeAhead;
....

o.onTypeAhead = function() {
    // Call original
    this.origTypeAhead();
    // Display value into your DOM element
    ...myDom....
};

Answer 3

@ Квай

Ok. Я думал, что вам нужно дополнительное поле DOM (в дополнение к существующему комбинированному полю).

Но ваше решение переопределит метод в классе ComboBox, не так ли? Это приведет к тому, что все ваши комбо-боксы будут отображаться в одном и том же DOM. Использование плагина переопределит только один конкретный экземпляр.

Answer 4

@ Thevs

Я думаю, вы были на правильном пути.

Я переопределил метод CombLox для initList.

    Ext.override(Ext.form.ComboBox, {
    initList : function(){

Если вы посмотрите на код, то увидите бит, в котором он отображает список предложений в виде данных. Так что просто установите применить к элементу dom вы хотите:

            this.view = new Ext.DataView({
            //applyTo: this.innerList,
            applyTo: "contentbox",

Answer 5

Так что уточните, вы хотите, чтобы выделенный текст отображался где-то, кроме непосредственно под вводом текста. Правильно?

ComboBox - это просто комбинация Ext.DataView , текстового ввода и дополнительной кнопки запуска. Не существует официального варианта того, что вы хотите, и взломать его, чтобы заставить его делать то, что вы хотите, было бы очень больно. Таким образом, самый простой способ действий (кроме поиска и использования какой-либо другой библиотеки с компонентом, который делает именно то, что вы хотите), это создать свой собственный из компонентов выше:

1. Создать текстовое поле. Вы можете использовать Ext.form.TextField , если хотите, и наблюдать за событием keyup.
2. Создайте DataView, привязанный к вашему магазину, рендеринг к любому элементу DOM, который вы хотите. В зависимости от того, что вы хотите, прослушайте событие selectionchange и предпримите все необходимые действия в ответ на выбор. например, setValue для Ext.form.Hidden (или простой ввод HTML-типа = «скрытый» элемент).
3. В прослушивателе событий keyup вызовите метод фильтра магазина (см. doc ), передав имя поля и значение из текстового поля. например, store.filter ('name', new RegEx (value + '. *'))

Это немного больше работы, но это намного короче, чем писать свой собственный компонент с нуля или взламывать ComboBox, чтобы вести себя так, как вы хотите.