ExtJS 6/7 - Cell with tagfield editor is marked as dirty after editing even when value is unchanged

0
votes

I have a grid with a column that uses a tagfield as an editor. When a cell in that column is edited it is marked as dirty even when the cell is unchanged.

See sencha fiddle here: fiddle

If you click a cell to edit it but then click away without making changes the cell is incorrectly marked as dirty. I would like to prevent this from happening but I don't know where to override this functionality. I assume it is just doing a basic equality comparison between arrays, which always results in them being unequal and thus marking the cell as dirty.

fiddle code:

Ext.application({
    name : 'Fiddle',

    launch : function() {



Ext.define('StatesModel', {
    extend: 'Ext.data.Model',

    fields: [
        'id',
        'abbr',
        'state',
        'description',
        'country'
    ]
});

Ext.define('StatesStore', {
    extend: 'Ext.data.ArrayStore',
    alias: 'store.states',

    model: 'StatesModel',
    storeId: 'states',

    data: [
        [0, 'AL', 'Alabama', 'The Heart of Dixie'],
        [1, 'AK', 'Alaska', 'The Land of the Midnight Sun'],
        [2, 'AZ', 'Arizona', 'The Grand Canyon State'],
        [3, 'AR', 'Arkansas', 'The Natural State'],
        [4, 'CA', 'California', 'The Golden State']
        ]
});


        Ext.create('Ext.grid.Panel', {
            dockedItems: [{
                xtype: 'toolbar',
                dock:'bottom',
                items: [
                    {
                        text: 'Show Raw Values',
                        handler: function(btn){
                            var x = Ext.Array.map(btn.up('grid').getStore().getRange(), function(i){
                                return i.data.id + ' - ' + i.data.vals;
                            }).join('<br />');
                            Ext.Msg.alert('values', x);
                        }
                    },
                    {
                        text: 'Commit Changes',
                        handler: function(btn){
                            Ext.each(btn.up('grid').getStore().getRange(), function(r){
                               r.commit();
                            });
                        }
                    }
                    ]
            }],
            renderTo: document.body,
            plugins: {
                cellediting: {
                    clicksToEdit: 1
                }
            },
            title: 'hello',
            store: [
                {id: 1, vals: [1,2,3]},
                {id: 2, vals: [2,4]}
            ],
            columns: [
                {
                    text: 'Id',
                    dataIndex: 'id',
                    width:60

                },
                {
                    flex:1,
                    text: 'Vals',
                    dataIndex: 'vals',
                    editor: {
                        xtype: 'tagfield',
                        valueField: 'id',
                        displayField: 'abbr',
                        queryMode: 'local',
                        store: {
                            type: 'states'
                        }
                    }
                }
                ]
        });
    }
});
1
extjsgridtagfield

1 Answers

0
votes

Was able to solve this by creating a custom data field called 'Array' and overwriting the default isEquals function. Then I simply set the data type for that field to 'array'.

Ext.define('Ext.data.field.Array', {
    extend: 'Ext.data.field.Field',
    alias: 'data.field.array',

    isEqual: function (value1, value2) {
        return Ext.Array.equals(value1.sort(), value2.sort());
    }

});