在 Tagfield ExtJS 中排序标签

ordering tags in Tagfield ExtJS

有没有办法在添加新值时对tagfield中的标签进行排序?我试图将值添加到现有数组 (getValue) 并将其设置为 setValue(newArray),但无济于事。我尝试设置 setValue(),然后设置 setValue(newArray)。但是我的商店在第一个 setValue() 之后清空。另一个想法我尝试了 addValue(record.id) 并覆盖了 setDoValue() 方法并在此方法中对值设置进行了排序,但无济于事。

我相信 this 就是您所要求的。我不太确定 valueCollection 的可见性是什么,但我在 comboboxes/tagfields 上的自定义逻辑中经常使用它,所以如果框架决定删除,这可能会成为一个问题这个变量。

/**
 * @thread 
 */
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}'
                }
            }]
        });
    }
});