Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-8966 in a recent build.
  1. #1
    Sencha User
    Join Date
    Mar 2013
    Location
    Toronto, Canada
    Posts
    47
    Vote Rating
    2
    Baidaly is on a distinguished road

      0  

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

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


    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:

    Code:
        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

    Code:
    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();
                        }
                    }
                ]
            }
        ]
    });
    Last edited by mitchellsimoens; 4 Mar 2013 at 2:25 PM. Reason: added 2nd testcase

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,547
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I added a 2nd testcase that is a bit more concise. Thanks for the report, I have opened a bug report.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Mar 2013
    Location
    Toronto, Canada
    Posts
    47
    Vote Rating
    2
    Baidaly is on a distinguished road

      0  

    Default


    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:

    Code:
    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();
                            }
                        }
                    ]
                }
            ]
        });
    });
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

Thread Participants: 1

Tags for this Thread