Resolving Dirty Flag in Ext.grid.Panel cell

Question

In an Ext JS grid, I'm editing individual cells. In one of the columns I have a Save button which fires the Save event. How can I remove the dirty flag (in red box in my image below) in the edited cell? I don't know how to perform the create, update and destroy options with the proxy because the documentation have a good example, so I'm planning on doing an AJAX request for these steps until I can take actual Sencha training. However, if the dirty flag resolves itself if I work the store and proxy directly, I'd prefer to do it the right way.

JavaScript Code:

            }, {
                header: 'Save',
                xtype: 'actioncolumn',
                align: 'center',
                width: 50,
                sortable: false,
                items: [{
                    icon: './Scripts/extjs/examples/shared/icons/fam/add.gif',
                    tooltip: 'Save Row',
                    handler: function (grid, rowIndex, colIndex) {
                        store.sync();                            
                        alert('saving');
                    }
                }]
            }, {
                header: 'Delete',
                xtype: 'actioncolumn',
                align: 'center',
                width: 50,
                sortable: false,
                items: [{
                    icon: './Scripts/extjs/examples/shared/icons/fam/delete.gif',
                    tooltip: 'Delete Task',
                    handler: function (grid, rowIndex, colIndex) {
                        store.removeAt(rowIndex);
                        store.sync();
                        alert('deleting');
                    }
                }]
            }

Answer 1

Try this:

// you can keep the way you are creating your Grid
Ext.create('Ext.grid.Panel', {
    // other options
    // these configs are sent to Ext.view.Table through Ext.grid.View
    viewConfig: {
        markDirty: false
    }
});

I didn't test it, but I think that is what you need. Take a look:

• http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.grid.View
• http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.view.Table
• http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.view.Table-cfg-markDirty

Read the description of the Ext.view.Table class and you will understand what is being done.

Answer 2

A Grid reflects the state of underlying Store, which is a collection of records based on your data Model. So as a shortcut before you have your Ajax proxy figured out, you can do this:

// Save handler
handler: function(grid, rowIndex, colIndex) {
    store.sync(); // Doesn't work now

    store.getAt(rowIndex).commit(); // Commit changes, clearing dirty flag

    alert('Record should now be clear');
}