ComboBox typeAhead有效，但在某些行为条件下valueField为空

ComboBox typeAhead works but valueField is null under certain behavioral conditions

本文关键字：条件下 valueField 为空 有效 typeAhead ComboBox      更新时间：2023-09-26

请在此处请求健全性检查...

ExtJS 4.2 组合框提前键入有效，但在以下情况下检索值字段时出现问题：-

1） 如果用户键入一个值，然后不是按回车键或单击选择组合列表，而是单击其他地方，则 valueField 为空，但所选值存在。

2）假设组合框项被正确选择，如果我输入一个额外的字符，然后退格该字符，组合框将无法再找到valueField。它几乎就像它已经重置了自己。

小提琴示例

https://fiddle.sencha.com/#fiddle/je1

如何复制

如果在组合框中输入 Maggie，您将在控制台窗口中看到 valueField ID，如果附加一个字符然后退格该字符，则控制台窗口中的 ID 为 null

（您需要打开控制台窗口才能看到输出）

forceSelect 无法解决此问题，因为我有一个模板，它不会接受组合框中不属于存储的条目，并且我需要对我的 valueField 使用 sumID，因为我需要检索该值并将其传递给服务器。

谢谢大家，拥有如此伟大的社区真是太棒了！！

我能够通过使用 forceSelect 并覆盖 setValue 来解决这个问题，从而允许通过 forceSelect 选择不在商店中而是在组合中的模板项。 从玩组合盒，IMO，为了获得良好的外观和感觉，forceSelection是要走的路。

这是我的覆盖，请参阅语句//覆盖开始

这是一个快速解决方案，当我

回到办公室时，我会完善声明，下面我从记忆中粘贴解决方案，你明白了。

setValue: function(value, doSelect) {
        var me = this,
            valueNotFoundText = me.valueNotFoundText,
            inputEl = me.inputEl,
            i, len, record,
            dataObj,
            matchedRecords = [],
            displayTplData = [],
            processedValue = [];
        if (me.store.loading) {
            // Called while the Store is loading. Ensure it is processed by the onLoad method.
            me.value = value;
            me.setHiddenValue(me.value);
            return me;
        }
        // This method processes multi-values, so ensure value is an array.
        value = Ext.Array.from(value);
        // Loop through values, matching each from the Store, and collecting matched records
        for (i = 0, len = value.length; i < len; i++) {
            record = value[i];
            if (!record || !record.isModel) {
                record = me.findRecordByValue(record);
            }
            // record found, select it.
            if (record) {
                matchedRecords.push(record);
                displayTplData.push(record.data);
                processedValue.push(record.get(me.valueField));
            }
            // record was not found, this could happen because
            // store is not loaded or they set a value not in the store
            else {
            //start of override
            // 'Select All Names' is the template item that was added                                     // to the combo box,  it looks like an entry from the store         
            // but it is not in the store
            if (me.forceSelection && me.getDisplayValue() === 'Select All Names'){
                    processedValue.push(value[i]);
                    dataObj = {};
                    dataObj[me.displayField] = value[i];
                    displayTplData.push(dataObj);
                }
                //end of override
                if (!me.forceSelection) {
                    processedValue.push(value[i]);
                    dataObj = {};
                    dataObj[me.displayField] = value[i];
                    displayTplData.push(dataObj);
                    // TODO: Add config to create new records on selection of a value that has no match in the Store
                }
                // Else, if valueNotFoundText is defined, display it, otherwise display nothing for this value
                else if (Ext.isDefined(valueNotFoundText)) {
                    displayTplData.push(valueNotFoundText);
                }
            }
        }
    // Set the value of this field. If we are multiselecting, then that is an array.
    me.setHiddenValue(processedValue);
    me.value = me.multiSelect ? processedValue : processedValue[0];
    if (!Ext.isDefined(me.value)) {
        me.value = null;
    }
    me.displayTplData = displayTplData; //store for getDisplayValue method
    me.lastSelection = me.valueModels = matchedRecords;
    if (inputEl && me.emptyText && !Ext.isEmpty(value)) {
        inputEl.removeCls(me.emptyCls);
    }
    // Calculate raw value from the collection of Model data
    me.setRawValue(me.getDisplayValue());
    me.checkChange();
    if (doSelect !== false) {
        me.syncSelection();
    }
    me.applyEmptyText();
    return me;
},

查看 Combobox 的源代码并尝试覆盖此方法，如下所示

doLocalQuery: function(queryPlan) {
    var me = this,
        queryString = queryPlan.query;

    if (!me.queryFilter) {
        me.queryFilter = new Ext.util.Filter({
            id: me.id + '-query-filter',
            anyMatch: me.anyMatch,
            caseSensitive: me.caseSensitive,
            root: 'data',
            property: me.displayField
        });
        me.store.addFilter(me.queryFilter, false);
    }

    if (queryString || !queryPlan.forceAll) {
        me.queryFilter.disabled = false;
        me.queryFilter.setValue(me.enableRegEx ? new RegExp(queryString) : queryString);
    }

    else {
        me.queryFilter.disabled = true;
    }

    me.store.filter();

    if (me.store.getCount()) {
        if (me.rawValue === me.lastSelection[0].get(me.displayField)){
            me.setValue(me.lastSelection);
        } else {
            if(me.store.getCount() === 1){
                me.setValue(me.store.first());
            }
            me.expand();
        }
    } else {
        me.collapse();
    }
    me.afterQuery(queryPlan);
},
相关文章：