[4.2.0.489 beta] After calling record.reject() GridView doesn't clear dirty mark

[Baidaly]

REQUIRED INFORMATION


Ext version tested:

• Ext 4.2.0.489 beta

Browser versions tested against:

• IE9
• FF19.0

Description:

• After calling record.reject() GridView doesn't clear dirty mark

Steps to reproduce the problem:

• Create the GridPanel
• Create the Form for editing values in Grid
• Change and save some field's value in a record. GridView will display the record's row as dirty
• Reject changes in the record.

The result that was expected:

• GridView should remove dirty mark from the record's row

The result that occurs instead:

• GridView will still display the record's row as dirty

Test Case:

    var updateRecord = function (form) {
                if (form.getForm()._record == null) {
                    return;
                }
                
                if (!form.getForm().isValid()) {
                    Ext.Msg.alert('Error', 'Form is invalid');
                    return false;
                }
                
                form.getForm().updateRecord();
           };
           
        Ext.onReady(function () {
            Ext.ns('App');
            window.App.Store1 = Ext.create("Ext.data.Store", {
                model: Ext.define("Person", {
                    extend: "Ext.data.Model",
                    clientIdProperty: "PhantomId",
                    fields: [{
                        name: "Id",
                        type: "int",
                        useNull: true
                    }, {
                        name: "Email"
                    }, {
                        name: "First"
                    }, {
                        name: "Last"
                    }],
                    idProperty: "Id",
                    validations: [{
                        type: "length",
                        field: "Email",
                        min: 1
                    }, {
                        type: "length",
                        field: "First",
                        min: 1
                    }, {
                        type: "length",
                        field: "Last",
                        min: 1
                    }]
                }),
                storeId: "Store1",
                autoLoad: true,
                proxy: {
                    data: [{
                        "Id": 1,
                        "Email": "fred@flintstone.com",
                        "First": "Fred",
                        "Last": "Flintstone"
                    }],
                    type: 'memory'
                }
            });
            Ext.create("Ext.form.Panel", {
                id: "UserForm",
                labelAlign: "Right",
                frame: true,
                renderTo: Ext.getBody(),
                width: 500,
                items: [{
                    xtype: "textfield",
                    anchor: "100%",
                    fieldLabel: "Email",
                    name: "Email",
                    vtype: "email",
                    allowBlank: false
                }, {
                    xtype: "textfield",
                    anchor: "100%",
                    fieldLabel: "First",
                    name: "First",
                    allowBlank: false
                }, {
                    xtype: "textfield",
                    anchor: "100%",
                    fieldLabel: "Last",
                    name: "Last",
                    allowBlank: false
                }],
                buttons: [{
                    text: "Save",
                    listeners: {
                        click: {
                            fn: function (item, e) {
                                updateRecord(Ext.getCmp('UserForm'));
                            }
                        }
                    }
                }],
                title: "User -- All fields are required",
            });
            Ext.create("Ext.grid.Panel", {
                id: "GridPanel1",
                frame: true,
                height: 200,
                plugins: [{
                    ptype: "cellediting"
                }],
                renderTo: Ext.getBody(),
                style: "margin-top: 10px",
                width: 500,
                tbar: {
                    xtype: "toolbar",
                    items: [{
                        text: "Reject",
                        listeners: {
                            click: {
                                fn: function (item, e) {
                                    App.Store1.getAt(0).reject();
                                }
                            }
                        }
                    }]
                },
                title: "Users",
                columns: {
                    items: [{
                        width: 40,
                        dataIndex: "Id",
                        text: "ID"
                    }, {
                        flex: 1,
                        dataIndex: "Email",
                        editor: new Ext.grid.CellEditor(Ext.apply({
                            field: {
                                xtype: "textfield"
                            }
                        }, {})),
                        text: "Email"
                    }, {
                        flex: 1,
                        dataIndex: "First",
                        editor: new Ext.grid.CellEditor(Ext.apply({
                            field: {
                                xtype: "textfield"
                            }
                        }, {})),
                        text: "First"
                    }, {
                        flex: 1,
                        dataIndex: "Last",
                        editor: new Ext.grid.CellEditor(Ext.apply({
                            field: {
                                xtype: "textfield"
                            }
                        }, {})),
                        text: "Last"
                    }]
                },
                selModel: window.App.ctl43 = Ext.create("Ext.selection.RowModel", {
                    proxyId: "ctl43",
                    selType: "rowmodel",
                    listeners: {
                        select: {
                            fn: function (item, record, index) {
                                Ext.getCmp('UserForm').getForm().loadRecord(record);
                            }
                        }
                    }
                }),
                store: "Store1"
            });
        });

HELPFUL INFORMATION


Screenshot or Video:
1.JPG


Debugging already done:

• none

Possible fix:

• Call GridView's refresh method

Additional CSS used:

• only default ext-all.css

Operating System:

• Win7 Pro

Extra testcase by Mitchell

Ext.create('Ext.grid.Panel', {
    renderTo : document.body,
    title    : 'Test',
    width    : 400,
    store    : {
        fields : ['foo'],
        data   : [
            { foo : 'bar' }
        ]
    },
    columns : [
        {
            header    : 'Foo',
            dataIndex : 'foo',
            flex      : 1
        }
    ],
    dockedItems : [
        {
            xtype : 'toolbar',
            dock  : 'top',
            items : [
                {
                    text    : 'Change Record',
                    handler : function(button) {
                        var grid   = button.up('gridpanel'),
                            store  = grid.getStore(),
                            record = store.getAt(0);

                        record.set('foo', new Date().getTime());
                    }
                },
                {
                    text    : 'Reject Changes',
                    handler : function (button) {
                        var grid   = button.up('gridpanel'),
                            store  = grid.getStore(),
                            record = store.getAt(0);

                        record.reject();
                    }
                }
            ]
        }
    ]
});

[mitchellsimoens]

I added a 2nd testcase that is a bit more concise. Thanks for the report, I have opened a bug report.

[Baidaly]

Hello, Mitchell!

I have the similar one to this issue with record.commit which requires view.refresh too. Can you say is it fixed with this issue or I have to create new bug?

Test case:

Ext.onReady(function () {
    Ext.create('Ext.grid.Panel', {
        renderTo : document.body,
        title    : 'Test',
        width    : 400,
        store    : {
            fields : ['foo'],
            data   : [
                { foo : 'bar' }
            ]
        },
        columns : [
            {
                header    : 'Foo',
                dataIndex : 'foo',
                flex      : 1
            }
        ],
        dockedItems : [
            {
                xtype : 'toolbar',
                dock  : 'top',
                items : [
                    {
                        text    : 'Change Record',
                        handler : function(button) {
                            var grid   = button.up('gridpanel'),
                                store  = grid.getStore(),
                                record = store.getAt(0);

                            record.set('foo', new Date().getTime());
                        }
                    },
                    {
                        text    : 'Reject Changes',
                        handler : function (button) {
                            var grid   = button.up('gridpanel'),
                                store  = grid.getStore(),
                                record = store.getAt(0);

                            record.commit();
                        }
                    }
                ]
            }
        ]
    });
});