5

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.

enter image description here

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');
                    }
                }]
            }
tshepang
  • 12,111
  • 21
  • 91
  • 136
JustBeingHelpful
  • 18,332
  • 38
  • 160
  • 245

2 Answers2

9

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:

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

davidbuzatto
  • 9,207
  • 1
  • 43
  • 50
  • I liked your answer, so I'll give you some points, but I think it'll be beneficial to the end-user if they know the cell is dirty and they're actually aware they clicked save on a given row. Thanks for your input though. – JustBeingHelpful Aug 10 '12 at 18:02
  • Thank you for this. I don't want to show the indicator as this grid is part of a larger form which needs to be saved. So, the client didn't want to see these and there's really no need to add extra code to commit the record on each edit. – abhijit Feb 26 '21 at 11:32
7

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');
}
Alex Tokarev
  • 4,821
  • 1
  • 20
  • 30
  • Note that you should only commit after the sync finishes successfully, by passing a callback to `sync()` – Ruan Mendes Sep 26 '14 at 17:18
  • Where to is that handler attached (being a member of), where is the __store__ variable declared? – Dirk Schumacher May 14 '18 at 11:05
  • @DirkSchumacher In the example above, `handler` is attached to the Action column item with tooltip "Save row". This function is called when user activates the Action item by clicking or pressing Enter key. `store` in that example is a closed over variable; the preferred way is to get it from the Grid instance instead: `grid.getStore()`. – Alex Tokarev May 22 '18 at 17:22