0

is there a solution to sort tags in tagfield when a new value is added? I tried to add the value to the existing array (getValue) and set it to setValue(newArray), but to no avail. I tried to set setValue() and then set setValue(newArray). But my store empties after the first setValue(). Another idea I tried to addValue(record.id) and to override the setDoValue() method and sort the value setting in this method, but to no avail.

Improve this question

1 Answer 1

Reset to default
1

I believe this is what you're asking for. I'm not quite sure what the visibility is of valueCollection, but I've used it quite a lot for custom logic on comboboxes/tagfields, so this could potentially be an issue if the framework ever decides to remove this variable.

/**
 * @thread https://stackoverflow.com/questions/67391892/ordering-tags-in-tagfield-extjs
 */
Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.define('OrderedTagField', {
            extend: 'Ext.form.field.Tag',
            alias: 'widget.orderedTagField',

            /**
             * @override
             * Overriding this, so whenever the store is set, we apply our configured sorters
             */
            onBindStore: function () {
                this.callParent(arguments);
                if (this.valueCollection) {
                    this.valueCollection.setSorters(this.displaySorters || []);
                }
            }
        });

        new Ext.container.Viewport({
            layout: {
                type: 'vbox'
            },
            viewModel: {
                data: {
                    value: [1, 6, 5]
                },
                stores: {
                    store: {
                        fields: ['id', 'show'],
                        data: [{
                            id: 6,
                            show: 'Battlestar Galactica'
                        }, {
                            id: 5,
                            show: 'Doctor Who'
                        }, {
                            id: 4,
                            show: 'Farscape'
                        }, {
                            id: 3,
                            show: 'Firefly'
                        }, {
                            id: 2,
                            show: 'Star Trek'
                        }, {
                            id: 1,
                            show: 'Star Wars: Christmas Special'
                        }]
                    }
                }
            },
            items: [{
                xtype: 'orderedTagField',
                fieldLabel: 'Select a Show',
                displayField: 'show',
                valueField: 'id',
                queryMode: 'local',
                filterPickList: true,
                // Configure how we want them to display
                displaySorters: [{
                    property: 'show',
                    direction: 'ASC'
                }],
                bind: {
                    value: '{value}',
                    store: '{store}'
                }
            }]
        });
    }
});
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Great solution. If I understood correctly valueCollection is responsible for the displayed value?
I believe valueCollection's primary purpose is to hold what has been selected, but that also means that it's used to generate the bound list that displays, yes. Sorry if that sounds like I'm splitting hairs.