CODEWITHSUNDEEP
extjs
user14861333
user14861333

Reputation:

ordering tags in Tagfield ExtJS

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.

Upvotes: 0

Views: 232

Answers (1)

incutonez
incutonez

Reputation: 3331

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

Upvotes: 1

Related Questions