我有一个ext组合框，它使用商店向用户输入值时向他们建议值。

可以在此处找到一个示例：组合框示例

有没有一种方法可以使建议的文本列表呈现为DOM中的元素。请注意，我并不是指" applyTo"配置选项，因为这将呈现整个控件，包括DOM元素的文本框。

解决方案

回答

因此，请澄清一下，我们希望所选文本呈现在文本输入正下方的某个位置。正确的？

ComboBox只是Ext.DataView，文本输入和可选触发器按钮的组合。对于我们想要的东西，没有一个官方的选择，并且对其进行破解以使其按照自己的意愿进行操作会非常痛苦。因此，最简单的操作方法(除了使用具有所需功能的组件查找和使用其他库以外)是使用上述组件构建自己的组件：

• 创建一个文本框。我们可以根据需要使用Ext.form.TextField，并观察keyup事件。
• 创建绑定到商店的DataView，以呈现所需的任何DOM元素。根据需要，听" selectionchange"事件，并根据需要采取任何所需的操作。例如，Ext.form.Hidden上的setValue(或者纯HTML输入type =" hidden"元素)。
• 在keyup事件侦听器中，调用商店的filter方法(请参阅doc)，并从文本字段传递字段名称和值。例如，store.filter('name'，new RegEx(value +'。*'))

它需要做更多的工作，但是比从头开始编写自己的组件或者入侵ComboBox表现出所需的行为要短得多。

回答

我们可以为此使用插件，因为我们可以从插件中调用甚至重写私有方法：

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

我认为甚至可以创建完整的方法链，在方法之前或者之后调用原始方法，但是我还没有尝试过。

另外，请不要因为使用非标准的插件定义和调用方法(未记录)而使我为难。这只是我看事物的方式。

编辑：

我认为方法链可以这样实现(未经测试)：

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

回答

@Thevs

我认为我们在正确的轨道上。

我所做的是重写Combobox的initList方法。

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

如果我们查看代码，则可以看到该位将建议列表呈现到数据视图的位置。因此，只需将apply设置为所需的dom元素即可：

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

回答

@qui

好的。我以为我们想要一个额外的DOM字段(除了现有的组合字段)。

但是解决方案将覆盖ComboBox类中的方法，不是吗？这将导致所有组合框都呈现为相同的DOM。使用插件只会覆盖一个特定实例。

回答

@qui

要考虑的另一件事是initList不是API的一部分。在将来的Ext版本中，该方法可能会消失，或者行为可能会发生重大变化。如果我们从未计划升级，则无需担心。