Question

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

可在此处找到一个示例：combobox example

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

Answer 1

您可以使用插件，因为您可以从插件中调用甚至覆盖私有方法：

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

Answer 2

@qui

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

Answer 3

如此澄清，您希望所选文本在文本输入正下方之外的某处呈现。正确的吗？

ComboBox只是Ext.DataView的组合，一个文本输入和一个可选的触发按钮。对于你想要的东西没有正式的选择，并且黑客攻击它可以让你做你想做的事情真的很痛苦。因此，最简单的操作过程（除了查找和使用其他库以及完全符合您要求的组件之外）就是使用上面的组件构建您自己的组件：

创建一个文本框。如果需要，您可以使用Ext.form.TextField，并观察键盘事件。
创建绑定到商店的DataView，呈现您想要的任何DOM元素。根据您的需要，聆听'selectionchange'事件并采取您需要采取的任何行动来响应选择。例如，Ext.form.Hidden（或纯HTML输入类型=“隐藏”元素）上的setValue。
在您的keyup事件侦听器中，调用store的filter方法（请参阅doc），传递字段名称和文本字段中的值。例如，store.filter（'name'，new RegEx（value +'。*'））

这是一项更多的工作，但它比从头开始编写自己的组件或者破解ComboBox的行为要短得多。

Answer 4

@Thevs

我认为你走在了正确的轨道上。

我所做的是覆盖Combobox的initList方法。

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

如果查看代码，您可以看到它向数据视图呈现建议列表的位。所以只需将apply设置为你想要的dom元素：

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

Answer 5

@qui

确定。我认为你想要一个额外的DOM字段（除了现有的组合字段）。

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

将ext Combobox中的建议值渲染到DOM中的元素

5 个答案: