组合框值在键入时消失答案

【问题标题】：Combobox values are disappearing on typing组合框值在键入时消失
【发布时间】：2015-11-11 14:19:19
【问题描述】：

使用 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'
    }
}

下面是sn-p的形式：

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

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

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

更新：我发现了一个问题模式，即如果在下拉列表中找到与键入的值完全匹配的记录，那么只有下拉值会消失。（例如，如果我输入字母 A 并且如果有记录的值 A 则下拉值正在消失。如果我输入 a 则下拉菜单不会消失，因为没有小写 a 的记录）。

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

【问题讨论】：

正如您所展示的，它应该可以工作（我在fiddle 中尝试了您的代码）。也许尝试自己在小提琴中重现问题，或者为工作和损坏的案例发布示例服务器响应。在我看来，这个问题似乎与服务器有关。
看看下面乔纳森·卡特赖特的小提琴。在我为组合框的 sata 源使用存储之前，我在那个小提琴中拥有完全相同的东西。如果你还有我的小提琴，请告诉我。

标签： javascript extjs combobox extjs5

【解决方案1】：

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

仅当组件绑定到模型时才会发生这种情况。

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

在 Ext 5 论坛中注册了 bug

更新

这是我想出的解决方法。

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;
    }
});

【讨论】：

【解决方案2】：

小提琴fiddle here 以您想要的方式工作，但选项灯来自商店。我注意到的是，我必须将组合框直接绑定到商店才能在键入 A1 后不隐藏地工作。

对于查看此问题上列出的其他小提琴的其他人，如果您非常缓慢地键入 A1，您将不会看到该行为。如果您以与通常写帖子或其他内容时相同的速度键入它，那么您会看到自动完成消失

【讨论】：

当我们将它绑定到模型时，问题正在发生。没有绑定就没有问题。看着你的小提琴，它没有绑定到模型，所以它工作正常。

【解决方案3】：

我有这样的 Extjs 组合：

{
xtype       :'combo',
emptyText   :'Pilih Client ...',
id          :'f_client',
store       : 'store_client',
displayField:'longname',
typeAhead   : true,
valueField  :'nickname',
width       : 350
}

我尝试搜索小写或大写的数据是可以的，所以我认为您必须在服务器端再次检查。因为像 oracle 这样的查询是区分大小写的。

column1 like '%a%'

和

`column1 like '%A%'`

不一样。

【讨论】：

【解决方案4】：

Ext.form.field.ComboBox 有一个属性caseSensitive，默认为false。这意味着问题可能在您的控制范围内，但前提是此属性设置为true。如果此属性为 false，您可以在控制台（或 Chrome 的 Sencha 扩展程序）中检查。

还要检查控制台的网络选项卡中发送到服务器的内容。如果组合发送大写，但服务器返回小写，则问题出在服务器端。

【讨论】：