ExtJS 4 ComboBox自动完成

Question

我有一个用于自动完成的ExtJS组合框，具有以下配置：

xtype:'combo',
displayField: 'name',
valueField:'id',
store: storeVar,
queryMode: 'remote',
minChars:2,
hideTrigger:true,
forceSelection:true,
typeAhead:true

我面临两个问题：

a. 如果用户从服务器返回的列表中选择一个值，但后来想要删除该值并保持组合框为空，那么旧值仍会在blur时重新出现，不允许组合框保持为空。在这种情况下，我该如何允许空值出现在此组合框中？我知道这可能是由于forceSelection：true造成的，但如果我不将其设置为true，则用户可以输入任意随机值。

b. 当服务器返回一个空列表时，我想显示一条消息 - "找不到任何值"。我试图通过将该值放入displayField实体中来实现这一点，即{id:'', name:'找不到任何值'}。但在这种情况下，用户可以选择此值并将其发送至服务器，这不是预期的结果。因此，我该如何显示空列表的消息？

有人能帮忙解决吗？

- netemp

Answer 1

针对上述提到的forceSelection问题，以下是一种可行的解决方法：

Ext.override(Ext.form.field.ComboBox,{          
    assertValue: function() {
        var me = this,
            value = me.getRawValue(),
            rec;
        if (me.multiSelect) {
            // For multiselect, check that the current displayed value matches the current
            // selection, if it does not then revert to the most recent selection.
            if (value !== me.getDisplayValue()) {
                me.setValue(me.lastSelection);
            }
        } else {
            // For single-select, match the displayed value to a record and select it,
            // if it does not match a record then revert to the most recent selection.
            rec = me.findRecordByDisplay(value);
            if (rec) {
                me.select(rec);
            } else {
                if(!value){
                    me.setValue('');
                }else{
                    me.setValue(me.lastSelection);
                }
            }
        }
        me.collapse();
    }
});

在包含ExtJS库文件之后，需要将此内容包含在其中。

对于"No Values Found"信息显示的其他问题，按照Varun的建议使用emptyText可以正常工作。

希望这能帮助寻找类似解决方案的人。

- netemp

Answer 2

我已经为Ext JS 3.3.1完成了此操作。 我不知道它们是否适用于Ext JS 4，但我认为它们应该适用。

对于第一个问题，请设置autoSelect:false。 autoSelect默认设置为true。 只有在设置了allowBlank:true时，才会起作用。 来自文档：

true表示选择数据存储器收集的第一个结果（默认为true）。 如果将值(typeAheadDelay)设为true，则false值将需要从下拉列表中手动选择以设置组件值。

对于第二个问题，请使用listEmptyText。 来自文档：

如果未找到项目，则在数据视图中显示的空文本。（默认为''）

干杯！

- Varun Achar

---

嗨，Varun，感谢你的回答。autoSelect实际上是突出显示列表中的第一个条目，而不是删除旧值并允许为空。至于listEmptyText-我无法在ExtJS4文档中找到此配置，可能已被取消。所以我尝试了它们两个，但不幸的是无法在ExtJs 4中使它们工作，并且仍在寻找一些解决方案。 - netemp

我刚刚查看了文档，listEmptyText现在可以通过listConfig的emptyText选项进行设置。你可以试试看。我自己还没有尝试过。再次检查allowBlank属性。这是唯一会导致问题1的配置。 - Varun Achar

嗨，Varun，感谢您的帖子。我确认listConfig下的emptyText成功运行。再次感谢。至于null值，我觉得forceSelection:true正在覆盖其他选项，因此，即使我允许allowBlank:true，但在值列表中没有Null值，那么组合框将重新填充旧值。我感觉解决这个问题的一种方法可以是从服务器端发送一个空记录，但不幸的是这并不太优雅。感谢迄今为止提供的所有帮助。 - netemp

不要那样做，只需在“combo”上编写一个“blur”事件，并在“combo.getRawValue（）”为空或为null时清除“valueField”属性。 - Varun Achar

谢谢Varun，我尝试使用getRawValue()，但它从未将null或空作为值显示。当组合框中的值被删除时，getRawValue()仍会返回旧值。因此，在失去焦点时，无法检查您提到的内容。再次感谢您迄今为止提供的所有帮助。 - netemp

这意味着设置了值后会触发模糊事件...然后也可以尝试使用beforeselect或change事件..如果什么都不起作用，请在www.sencha.com的extjs论坛上发布错误报告。干杯！ - Varun Achar