Extjs 小部件标签字段无法在远程存储列表中设置选定值答案

【问题标题】：Extjs widget tagfield can't set selected value in list from remote storeExtjs 小部件标签字段无法在远程存储列表中设置选定值
【发布时间】：2021-07-09 15:20:22
【问题描述】：

我在 widgetcolumn 中的 tagfield 有问题。我将远程存储用于标记字段，并使用“autoLoadOnValue”在列中显示加载值。它工作正常。但我对值列表有疑问。如果列具有值，则它不会像在列表中选择的那样突出显示。但在 html 中，加载的值被定义为选中的值。

如果您选择不同的值，则会同时突出显示两个值。

如何才能在展开列表时突出显示列中加载的值？有没有办法更新下拉列表？

这是我的小提琴：https://fiddle.sencha.com/#view/editor&fiddle/3d29

UPD: queryMode: 'local' 对我不起作用，因为在我的应用程序中我使用 extraParams 加载了商店，并且我总是得到新的商店值

有什么想法吗？？

【问题讨论】：

标签： extjs widget store tagfield

【解决方案1】：

这是因为您的标签字段存储在展开时重新加载并丢失了选定的值。您可以使用 queryModel: 'local' 来防止商店重新加载。

...
widget: {
    xtype: 'tagfield',
    store: this.tagStore,
    valueField: 'tag',
    displayField: 'field',
    autoLoadOnValue: true,
    //filterPickList: false,
    queryMode : 'local', // use this to avoid store reload on
    listeners: {
        select: function (cmp, record) {
            const dataIndex = cmp.getWidgetColumn().dataIndex;
            const widgetRecord = cmp.getWidgetRecord()
            let valuesArr = [];
            Ext.each(record, function (item) {
                valuesArr.push(item.data.tag)
            })
            widgetRecord.set(dataIndex, valuesArr);
            console.log(record)
        }
    }
}
...

或者您可以使用以下覆盖（或者您可以使用适当的逻辑扩展标签字段）来存储选定的值并在存储重新加载后重新选择它：

Ext.define('overrides.form.field.Tag', {
    override: 'Ext.form.field.Tag',
    
   initComponent: function() {
       this.getStore().on('beforeload', this.beforeStoreLoad, this);
       this.getStore().on('load', this.afterStoreLoad, this);
       this.callParent();
   },
   
   beforeStoreLoad: function(store) {
       this.beforeStoreLoadFieldValue = this.getValue();
   },
   
   afterStoreLoad: function(store) {
       this.setValue(this.beforeStoreLoadFieldValue);
   }
});

【讨论】：

谢谢你，亚瑟！覆盖帮助了我！