Question

我想在组合框中为记录设置一个显示字段（这是一个历史数据并存储在数据库中并加载到表单上），该数据库中没有条目。

例如，我在商店中有3个条目如下 - 值：显示字段一个苹果 b：球 c：猫

像往常一样，它用于预先填充组合框（直到这里工作正常）。

我有存储在数据库中的历史数据，其中包含一些记录的值 id：d，它不再存在于商店中，但我仍然想支持旧数据，并希望用它显示相关的显示字段（'doll'）。

我的查询是，即使此记录不在与组合框关联的商店中，如何在从数据库获取记录时设置显示字段？目前，我们在extJs中没有诸如setDisplayField之类的方法，但是我们有一个方法'setValue'来改变组合框中的值，这是不希望的。

我想在数据库中遇到'id = d'时将显示字段更改为'doll'。

请帮忙。

谢谢

Answer 1

如果你真正想要的是setDisplayField方法，实际上它是存在的，它被称为setRawValue。

然而，令人怀疑的是，它本身就足以解决您的问题。实际上，你可以用它来获得正确的显示，但你会失去你的价值......

var legacyData = [
    {id: 'd', name: "Doll"}
];

var combo = Ext.widget({
    renderTo: Ext.getBody()
    ,xtype: 'combo'
    ,fieldLabel: "Regular combo"
    ,valueField: 'id'
    ,displayField: 'name'
    ,queryMode: 'local'
    ,value: 'd'
    ,store: {
        fields: ['id', 'name']
        ,data: []
        ,autoLoad: true
        ,listeners: {
            load: function() {
                var value = combo.value,
                    valueField = combo.valueField,
                    displayField = combo.displayField,
                    o = Ext.Array.findBy(legacyData, function(data) {
                        return data[valueField] === value;
                    });

                if (o) {
                    combo.setRawValue(o[displayField]);
                }

                // Fail! This will alert 'Doll' instead of 'd'.
                //
                // If you set forceSelection to true, the value will be cleared
                // all together.
                //
                alert(combo.getValue());
            }
        }
    }
});

正如dbring建议的那样，将历史记录添加到组合商店中确实可以解决您的问题，当且仅当您愿意让用户选择历史记录时。在我的理解中并非如此，因为否则你不会有任何问题开始...

在检查组合类的代码之后，我认为实现所需内容的最佳方法是覆盖findRecord方法。此方法返回的任何记录都将用于更新组合框显示及其值，无论此记录是否存在于组合的存储中，并且不影响可在组合中选择的值。完美！

假设我们已经在我们的组合中添加了legacyStore，以下是如何覆盖findRecord方法来执行此操作：

findRecord: function(field, value) {
    var ls = this.legacyStore,
        record = this.callParent(arguments);
    if (record) {
        // found in current store
        return record;
    } else if (ls) {
        // try legacy value store
        var idx = ls.findExact(field, value);
        return idx !== -1 ? ls.getAt(idx) : false;
    } else {
        return false;
    }
}

现在，我们还有另外两个问题要处理......

首先，如果调用findRecord时未加载旧版商店会怎么样？那不行。如果它的存储未加载，组合框将以其vanilla形式中止其setValue方法，并从其onLoad方法调用它。我们应该添加一些代码来为我们的旧商店复制这种行为。

第二个问题更简单，但是如果组合用历史值初始化，并且用户更改组合的值但后悔他们的选择怎么办？如果不取消并重新填写整个表格，他们将无法获得原始价值。为了避免这种挫败感，我们可以更改组合行为以在清除时恢复其原始值，而不是其最后一个值。由于我不知道这是否合适，我们会将其添加为选项。

考虑到这一切，这里是处理您特定用例的“ux”的完整代码。

请注意，如果forceSelection设置为true并且商店是使用autoLoad: true创建的，那么它包含一个针对错误的全局修复程序，该错误会终止组合框的初始值。有关this other question中有关该信息的更多信息。或者，您可以跳过全局修复并将loading: true添加到使用forceSelection: true的组合的所有商店和旧版商店。

/**
 * Fixes the bug with autoLoad: true and forceSelection: true.
 * 
 * See: https://stackoverflow.com/a/14440479/1387519
 */
Ext.define('Ext.ux.fix.data.Store.AutoLoadLoadingState', {
    override: 'Ext.data.Store'
    ,constructor: function() {
        this.callParent(arguments);
        if (this.autoLoad) {
            this.loading = true;
        }
    }
});

/**
 * A combo box with support for legacy values.
 *
 * Legacy values will be displayed if their value is assigned to the 
 * combo, but they won't be selectable (nor queryable) by the user.
 */
Ext.define('Ext.ux.form.field.LegacyValueCombo', {
    extend: 'Ext.form.field.ComboBox'

    ,alias: 'widget.legacyvaluecombo'

    ,requires: [
        'Ext.ux.fix.data.Store.AutoLoadLoadingState'
    ]

    /**
     * The store that provides legacy values.
     *
     * @cfg {Ext.data.Store/Object/String}
     */
    ,legacyStore: undefined

    /**
     * If `true` and {@link #forceSelection} is also `true`, the
     * {@link #originalValue original value} of the field will be restored when
     * the field is cleared, instead of the last value.
     *
     * This may be useful considering that if the combo original value is a
     * legacy one, and the user changes this value, they will have no other
     * means to get it back afterward.
     *
     * @cfg {Boolean}
     */
    ,restoreOriginalValue: true

    /**
     * Ensure the legacy store is a store instance before initializing the
     * combo box.
     */
    ,initComponent: function() {

        var legacyStore = this.legacyStore;
        if (legacyStore) {
            this.legacyStore = Ext.data.StoreManager.lookup(legacyStore);
        }

        this.callParent(arguments);
    }

    /**
     * Overridden to return a legacy record if the value is not found in the
     * regular store.
     *
     * This method will only work if both stores have been loaded.
     */
    ,findRecord: function(field, value) {
        var ls = this.legacyStore,
            record = this.callParent(arguments);
        if (record) {
            // found in current store
            return record;
        } else if (ls) {
            // try legacy value store
            var idx = ls.findExact(field, value);
            return idx !== -1 ? ls.getAt(idx) : false;
        } else {
            return false;
        }
    }

    /**
     * This method is overridden to support the case where the legacy store
     * loads after the regular store.
     */
    ,setValue: function(value) {
        var store = this.store,
            legacyStore = this.legacyStore;

        if (legacyStore) {

            // If the legacy store has not been loaded, trigger it.
            if (!legacyStore.lastOptions) {
                if (!legacyStore.loading) {
                    legacyStore.load();
                }
            }

            // Legacy store is loading, we must wait for it to be done before
            // processing the value.
            if (legacyStore.loading) {

                // This is done in the parent setValue method, but we are not
                // sure it will be called in time so we must replicate this 
                // code here.
                this.value = value;
                this.setHiddenValue(value);

                // If the regular store is loading, then this method will be
                // called again when it is done. We will see at this time if we
                // still have to wait for the legacy store. In the other case,
                // we have to simulate a call to onLoad when the legacy store
                // has loaded.
                if (!store.loading) {
                    legacyStore.on({
                        single: true
                        ,scope: this
                        ,load: function(legacyStore, records, success) {
                            this.onLoad(store, store.getRange(), success);
                        }
                    });
                }
            }
            // Legacy store is loaded, that's OK to continue.
            else {
                this.callParent(arguments);

                // Implements restoreOriginalValue.
                if (this.restoreOriginalValue) {
                    this.lastSelection = this.originalValue;
                }
            }

            // setValue must return this
            return this;
        }
        // No legacy store, just defer to the super method.
        else {
            return this.callParent(arguments);
        }
    }
});

最后，这里有一个live demo，其中有大量示例证明此ux适用于同步和异步存储的所有组合以及forceSelection ......虽然setRawValue没有。{/ p >

Answer 2

我认为您可以通过创建Ext.XTemplate并将该模板设置为组合框上的displayTpl属性来实现此目的。然后在您的模板中，您可以使用一种方法来测试应以不同方式显示的记录。

没有记录displayTpl配置，但是如果你查看ComboBox Source Code并搜索 me.displayTpl ，你会发现它们只是创建一个默认的displayTpl（如果不存在）。

Answer 3

您只需在使用store.add({id:'d',name:'doll'})

加载后将该记录添加到商店

这是一个不是你需要的例子，但显示了这个概念：

Ext.define('MyApp.store.Users', {
    extend:'Ext.data.Store',
    model:'MyApp.model.User',
    listeners:{
        load:function (store, recs) {
            store.add({uid:'', name:''});  //adding empty record to enable deselection of assignment
        }
    }
});

EXT JS：在Combobox中，如何为不在商店中的记录设置显示字段？

3 个答案: