Extjs 小部件标记字段无法在远程存储的列表中设置选定值
Extjs widget tagfield can't set selected value in list from remote store
我在 widgetcolumn 中的标签域有问题。
我将远程存储用于标记字段,将“autoLoadOnValue”用于在列中显示加载值。它工作正常。但是我对值列表有疑问。
如果列有一个值,它不会在列表中突出显示为 selected。但在 html 中,加载值定义为 selected.
如果您 select 一个不同的值,两个值将同时突出显示。
如何才能在展开列表时突出显示列中加载的值?有什么办法可以更新下拉列表吗?
这是我的fiddle:https://fiddle.sencha.com/#view/editor&fiddle/3d29
UPD: queryMode: 'local' 对我不起作用,因为在我的应用程序中,我用 extraParams 加载了商店,我总是得到商店的新值
有什么想法吗??
发生这种情况是因为您的标签字段存储在展开时重新加载并丢失 selected 值。您可以使用 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)
}
}
}
...
或者您可以使用以下覆盖(或者您可以使用适当的逻辑扩展标签字段)来存储 selected 值并在存储重新加载后重新 select 它:
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);
}
});
我在 widgetcolumn 中的标签域有问题。
我将远程存储用于标记字段,将“autoLoadOnValue”用于在列中显示加载值。它工作正常。但是我对值列表有疑问。
如果列有一个值,它不会在列表中突出显示为 selected。但在 html 中,加载值定义为 selected.
如何才能在展开列表时突出显示列中加载的值?有什么办法可以更新下拉列表吗?
这是我的fiddle:https://fiddle.sencha.com/#view/editor&fiddle/3d29
UPD: queryMode: 'local' 对我不起作用,因为在我的应用程序中,我用 extraParams 加载了商店,我总是得到商店的新值
有什么想法吗??
发生这种情况是因为您的标签字段存储在展开时重新加载并丢失 selected 值。您可以使用 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)
}
}
}
...
或者您可以使用以下覆盖(或者您可以使用适当的逻辑扩展标签字段)来存储 selected 值并在存储重新加载后重新 select 它:
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);
}
});