2

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

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

有没有办法让建议的文本列表呈现给 DOM 中的元素。请注意，我不是指“applyTo”配置选项，因为这会渲染整个控件，包括 DOM 元素的文本框。

4

5 回答 5

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....
};
于 2008-09-16T18:45:21.017 回答
1

@qui

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

于 2008-09-17T17:36:36.260 回答
0

所以澄清一下，您希望所选文本呈现在文本输入正下方之外的某个地方。正确的？

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

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

这需要更多的工作，但它比从头开始编写自己的组件或破解 ComboBox 以使其表现得像你想要的那样短得多。

于 2008-09-16T17:14:14.153 回答
0

@Thevs

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

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

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

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

            this.view = new Ext.DataView({
            //applyTo: this.innerList,
            applyTo: "contentbox",
于 2008-09-17T10:20:46.387 回答
0

@qui

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

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

于 2008-09-17T14:18:40.917 回答