ExtJS 4 组合框自动完成答案

【问题标题】：ExtJS 4 ComboBox AutoCompleteExtJS 4 组合框自动完成
【发布时间】：2011-11-12 20:10:10
【问题描述】：

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

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

我面临两个问题：

一个。如果用户从服务器返回的列表中选择了一个值，但后来想要删除该值并保持组合框为空，那么旧值也会重新出现在模糊中，不允许组合框保持为空。在这种情况下，如何在此组合框中允许空值？我知道这可能是由于 forceSelection:true，但我需要保持它为真，否则用户可以键入任何随机值。 p>

b. 当服务器返回一个空列表时，我想显示一条消息 - 未找到值。我尝试这样做，方法是将这个值放在 displayField 实体中，即 {id:'', name:'No Value Found'}。但是在这种情况下，用户可以选择这个值并将其发送到服务器，这不是预期的。那么，如何显示空列表的消息？

有人可以解释一下吗？

【问题讨论】：

标签： extjs autocomplete combobox extjs4

【解决方案1】：

我已经为 Ext JS 3.3.1 做了这个。我不知道它们是否适用于 Ext JS 4，但我想它们应该适用。

对于第一个问题，设置autoSelect : false。 autoSelect 默认设置为 true。这仅在设置了allowBlank : true 时才有效。来自文档

true 选择数据存储收集的第一个结果（默认值为真）。错误值需要手动选择下拉列表设置组件值，除非值 (typeAheadDelay) 是真的。

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

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

干杯。

【讨论】：

您好 Varun，感谢您的回答。 autoSelect 实际上是突出显示列表中的第一个条目，而不是用于删除旧值并允许为空。而对于 listEmptyText - 我无法在 ExtJS4 文档中找到此配置，可能它已被取消。所以我尝试了它们，但不幸的是无法让它们在 ExtJs 4 中工作，并且仍在寻找一些解决方案。
我刚刚查看了文档，listEmptyText 现在可以通过listConfig 的emptyText 选项进行设置。试试看。我自己没试过。再次检查 allowBlank 属性。这是唯一会导致问题 1 的配置。
嘿 Varun，感谢您的帖子。我确认 listConfig 下的 emptyText 工作成功。再次感谢。至于空值，我觉得 forceSelection:true 覆盖了其他选项，因此，即使我确实允许空白：true，但值列表中不存在空值，然后组合框会填充旧值。我觉得解决这个问题的一种方法是从服务器端发送一个空记录，但不幸的是它并不那么优雅。感谢您迄今为止的所有帮助。
不这样做，只需在combo 上写一个blur 事件，并在combo.getRawValue() 为空或为空时清除valueField 属性。
感谢 Varun，我尝试使用 getRawValue()，但 null 或 empty 不会作为值出现在其中。当组合框中的值被删除时，getRawValue() 也会返回旧值。因此，在模糊时，无法检查您提到的内容。再次感谢到目前为止的所有帮助。

【解决方案2】：

对于上述问题中与 forceSelection 相关的问题，以下是创建的可以达到预期目的的 hack：

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 处显示的其他消息问题 - emptyText - 按照 Varun 的建议正常工作。

希望这可以帮助一些人寻找类似的东西。

【讨论】：