CODEWITHSUNDEEP
javascriptformsextjstagfield
Kristián Štech
Kristián Štech

Reputation: 1

Extjs TagField dropdown items persistent after selection

I'm currenly trying edit TagField behaviour so that the dropdown items stay in dropdown even after you select one or multiple. Use case is something like revenue calculator (every user can determinate own math formula given some constants and math operators), so user can select f.e. symbol "+" multiple times to get formula they want. Is there a easier way then f.e. after selection add the record back to store? Is there better component for something like this?

As I described earlier I only tried TagField and not that pretty code after every selection. I bet there is better way to do it, I'm kinda new to Extjs. Thanks for every suggestion :)

Upvotes: 0

Views: 75

Answers (1)

Dinkheller
Dinkheller

Reputation: 5054

Here are some hints how you can do this yourself:

  1. Override

Tell the component not to filter the picker store. To do so I added a flag reselectable, so that you can reuse the tagfield in a standard manner.

Ext.define('MyApp.overrides.form.field.Tag', {
    override: 'Ext.form.field.Tag',
    
    config: {
        reselectable: false
    },

    updateReselectable: function(value) {
        if (value) this.defaultListConfig.cls = ('x-reselectable');
    },

    filterPicked: function(rec) {
        if (this.getReselectable()){
            return true;
        } else {
            return !this.valueCollection.contains(rec);
        }
    }
})

Do not show the selected cls

    .x-reselectable .x-boundlist-selected {
        color: inherit;
        background: inherit;
        border-color: inherit;
    }
  1. Reuse an entry

Just try to figure out how to reuse an entry, the same way I created the override.

To do this you may want to read the source file:

https://docs.sencha.com/extjs/7.7.0/classic/src/Tag.js.html

Upvotes: 0

Related Questions