Search code examples
extjswidgetstoretagfield

Extjs widget tagfield can't set selected value in list from remote store

I have a trouble with my tagfield inside widgetcolumn. I used remote store for tagfield and "autoLoadOnValue" for display loaded value in column. And it's works right. But i have a problem with values list. If a column has a value, it is not highlighted as selected in the list. But in html the loaded value is defined as the selected.
enter image description here

enter image description here And if you select a different value, two values will be highlighted at once.

How can I make it so that when I expand the list, the value loaded in the column is highlighted? Is there any way to update the drop-down list?

This my fiddle: https://fiddle.sencha.com/#view/editor&fiddle/3d29

UPD: queryMode: 'local' does not work for me because in my app I load the store with extraParams and I always get new values for store

Any ideas??

Solution

  • It happens because your tag field store is reloading on expand and loosing the selected values. You can use queryModel: 'local' to prevent store reload.

    ...
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)
        }
    }
}
...

    Or you can use the following override (or you can extend the tag field with appropriate logic) to store the selected value and after store reload re-select it:

    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);
   }
});