Extjs 小部件标签字段无法在远程存储列表中设置选定值
Posted
技术标签:
【中文标题】Extjs 小部件标签字段无法在远程存储列表中设置选定值【英文标题】:Extjs widget tagfield can't set selected value in list from remote store 【发布时间】:2021-07-09 15:20:22 【问题描述】:我在 widgetcolumn 中的 tagfield 有问题。 我将远程存储用于标记字段,并使用“autoLoadOnValue”在列中显示加载值。它工作正常。但我对值列表有疑问。 如果列具有值,则它不会像在列表中选择的那样突出显示。但在 html 中,加载的值被定义为选中的值。
如果您选择不同的值,则会同时突出显示两个值。
如何才能在展开列表时突出显示列中加载的值?有没有办法更新下拉列表?
这是我的小提琴:https://fiddle.sencha.com/#view/editor&fiddle/3d29
UPD: queryMode: 'local' 对我不起作用,因为在我的应用程序中我使用 extraParams 加载了商店,并且我总是得到新的商店值
有什么想法吗??
【问题讨论】:
【参考方案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);
);
【讨论】:
谢谢你,亚瑟!覆盖帮助了我!以上是关于Extjs 小部件标签字段无法在远程存储列表中设置选定值的主要内容,如果未能解决你的问题,请参考以下文章