EXT JS：在Combobox中，如何为不在商店中的记录设置显示字段？-Java 学习之路

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

例如，我在商店中有3个条目如下 - 值：显示字段a：apple b：ball c：cat

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

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

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

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

请帮忙 .

谢谢

3 回答

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

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

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方法 . 此方法返回的任何记录都将用于更新组合框显示及其值，而不管此记录是否存在于组合的存储中，并且不会影响可在组合中选择的值 . 完善！

让's say we' ve在我们的组合中添加 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 方法调用它 . 我们应该添加一些代码来复制旧版商店的这种行为 .

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

考虑到这一切，这里是处理您的特定用例的“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 却没有 .

回复于 2024-05-02T06:04:38+08:00

0

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

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

回复于 2024-05-02T06:04:38+08:00

您只需要在使用 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
        }
    }
});

回复于 2024-05-02T06:04:38+08:00

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

3 回答

相关问题