ExtJs 组合在商店页面加载时丢失选定的值答案

【问题标题】：ExtJs combo loses selected value on store page loadExtJs 组合在商店页面加载时丢失选定的值
【发布时间】：2012-12-21 11:06:23
【问题描述】：

我有一个带有 JsonStore 和 queryMode: 'remote' 的 ExtJS 4.1 组合框，具有分页和过滤功能，例如：

... 查询模式：'远程'，允许空白：真，强制选择：真，自动选择：假，页面大小：25，预输入：真， minChars: 2, ...

当我在此组合框中加载带有保存值的表单时，我加载存储并将保存的值作为查询（过滤）参数传递，以确保所选值肯定在返回的记录中，然后我将该值设置为组合选择值，如下所示：

mycombo.getStore().load({ 参数：{ 查询：显示字段 }, 范围： { 领域：组合，值字段：值字段，显示字段：显示字段 }, 回调：函数（记录，操作，成功）{ this.field.setValue(this.valueField); } });

到目前为止，一切都很好，以上工作正常。问题是，如果用户然后单击下拉箭头为组合选择另一个值，则加载商店的第一页，擦除所有先前选择的值，即使没有选择，先前选择的值也会丢失.

这个问题很笼统，和这个问题很相似： ExtJS paged combo with remote JSON store. Display selected value with paging 可以总结如下：

在带有远程存储和分页的 ExtJS 组合框中，当加载的页面发生变化时，选定的值会丢失。

我尝试为商店设置clearOnPageLoad: false，但是每次加载新页面时，记录都会附加到列表的末尾。我本来希望这个参数能够缓存加载的页面，并在来回移动时仍然向我显示正确的页面。

那么，关于如何在页面之间移动时保持所选值的任何想法？我想我可以手动创建一个包含所选值的记录，并在每次加载页面时将其附加到存储中，直到选择一个新值为止，但这对于如此基本的东西来说听起来太费力了。

【问题讨论】：

标签： extjs extjs4 extjs4.1

【解决方案1】：

遇到了同样的问题，'pruneRemoved: false' 不起作用（它似乎只在网格中使用）。这是解决方案：

Ext.override(Ext.form.field.ComboBox,{

    // lastSelection is searched for records
    // (together with store's records which are searched in the parent call)

    findRecord: function(field, value) {
        var foundRec = null;
        Ext.each(this.lastSelection, function(rec) {
            if (rec.get(field) === value) {
                foundRec = rec;
                return false; // stop 'each' loop
            }
        });
        if (foundRec) {
            return foundRec;
        } else {
            return this.callParent(arguments);
        }
    }
});

希望它没有负面影响。我测试了一下，感觉还可以。

【讨论】：

嗨，不确定您的解决方案是否有效，但我在下面发布了 Sencha 支持的官方答案。

【解决方案2】：

由于我们有付费许可证，我们最终联系了 Sencha 支持。这是我们得到的答案：


Ext.override(Ext.form.field.ComboBox, {
    onLoad: function() {
        var me = this,
            value = me.value;

        if (me.ignoreSelection > 0) {
            --me.ignoreSelection;
        }

        if (me.rawQuery) {
            me.rawQuery = false;
            me.syncSelection();
            if (me.picker && !me.picker.getSelectionModel().hasSelection()) {
                me.doAutoSelect();
            }
        }

        else {

            if (me.value || me.value === 0) {
                if (me.pageSize === 0) { // added for paging; do not execute on page change
                    me.setValue(me.value);
                }
            } else {


                if (me.store.getCount()) {
                    me.doAutoSelect();
                } else {

                    me.setValue(me.value);
                }
            }
        }
    }
});

【讨论】：

似乎这个实现的一个限制是值/显示字段是相同的。在我的应用程序中，它们是不同的（即 id 和 name）。我认为有必要扩展组合框的界面来设置选定的值和显示。
我已经很长时间没有发布这个了，我不能再确定了，因为我现在也没有在那个应用程序上工作，但我不认为显示和字段值是相同的.在大多数实际情况下，它们不是。

【解决方案3】：

我在 extjs 6.0.1 中遇到了这个问题。

我发现了一个可能对其他人有帮助的变通方法。

在调用基础 onLoad 之前，我使用 override for onLoad 将组合中的选定记录添加到存储中。

这是有效的，因为如果所选记录在正在查看的页面中，则组合足够智能，不会清除选择。换句话说，在您翻页时选择被清除的原因是因为所选记录不在您正在查看的页面中。

onLoad: function (store, records, success)
{
    var selection = this.getSelection();

    if (selection)
    {
        records.unshift(selection);
        store.insert(0, records);
    }

    this.callParent(arguments);
}

【讨论】：