javascript - 组合框值在键入时消失

Question

使用 extjs 5.1.3 版本。我有一个 typeAhead 组合框，形式如下:

组合框商店:

Ext.define('MyApp.view.myobj.field.CustomObject', {
    extend:'Ext.form.field.ComboBox',
    xtype: 'cstmObject',
    requires: [
        'MyApp.model.myobj.CustomObject'
    ],
    fieldLabel: 'Custom Object Name',
    displayField: 'name',
    valueField: 'name',
    queryMode: 'remote',
    selectOnFocus: false,
    typeAhead: true,
    hideTrigger: true,
    minChars: 1,
    queryCaching : false,
    store:{
        model: 'MyApp.model.myobj.CustomObject'
    }
}

下面是表格中的片段:

{
    xtype: 'cstmObject',
    fieldLabel: 'Custom Object Name',
    allowBlank: false,
    maxLength: 5,
    enforceMaxLength: true,
    bind: '{customObject.row}'
}

在组合框中键入值时，有时会显示下拉值，有时不会显示输入。当我观察网络​​面板时，商店正在从服务器正确加载。

当商店从服务器正确加载时，客户端可能会出现哪些不显示下拉值的问题？

更新:我找到了该问题的模式，即如果在下拉列表中找到与输入值完全匹配的记录，则只有下拉值会消失。 (例如，如果我键入字母表 A 并且如果有值为 A 的记录，则下拉值将消失。如果我键入 a，则下拉列表不会消失，因为没有小写的记录 a)。

我需要提供哪些必要的配置来解决这个问题？

Answer 1

这似乎是 Ext 5.1 中的一个错误

只有当组件绑定(bind)到模型时才会发生这种情况。

这里是 Fiddle重现此问题。输入 A 您将看到结果，当您输入 A1(商店中有)时，结果将被隐藏。

记录了一个 bug在 Ext 5 论坛中

更新

这是我想出的解决办法。

Ext.define('MyApp.overrides.form.field.ComboBox', {
    override: 'Ext.form.field.ComboBox',

    /**
     * Fix for EXTJS-19274
     */
    setValue: function(value) {
        var me = this;

        // This is the value used to forceSelection in assertValue if an invalid value is left
        // in the field atcompleteEdit. Must be cleared so that the next usage of the field
        // is not affected.
        me.lastSelectedRecords = null;

        // Value needs matching and record(s) need selecting.
        if (value != null) {
            // Only go through text/record matching if there's a change.
            if (value !== me.getRawValue()) {
                me.doSetValue(value);
            }
        }
        // Clearing is a special, simpler case.
        else {
            me.suspendEvent('select');
            me.valueCollection.beginUpdate();
            me.pickerSelectionModel.deselectAll();
            me.valueCollection.endUpdate();
            me.resumeEvent('select');
        }
        return me;
    }
});