Ext Js 6.0.0 remove table's small red dirty cell flags manually

Question

I have a table where I can change cell data, afterwards I manually trigger an AJAX PUT request with that changed data. The 'table' is extending an Ext.grid.Panel . After the request returned successfully I want the red flags of the changed cells to disappear.

// some ID actually passed from somewhere else
var myEntityId = '123456';    

Ext.Ajax.request( {
  url: '/myEntity/'+ myEntityId,
  method: 'PUT',
  params: { pressure: 47 },
  success: function( response, opts ) {
    // remove red cell flags of the table...
  },
});

How do I do that?

(The post at https://stackoverflow.com/a/11905922/845117 did not really help me. At the position where the code runs I do not really have a store connected to my table cells. Plus I send more informations to the backend than are simply displayed in the table. This also reasons why I use an extra ajax request for updating the backend.)

score 2 · Answer 1 · answered May 14 '18 at 11:22

2

You can always use record.commit() to commit a record without syncing it to the backend.

https://fiddle.sencha.com/#view/editor&fiddle/2glo

answered May 14 '18 at 11:22

Alexander

19,906
19
75
162

Alexander, thank you for the hint! I had to get hold of the record variable and invoke `record.commit()`. It works. As in your example shown I could not use the listener `checkchange` since it did not existing for my column; probably another ExtJs version. – Dirk Schumacher May 16 '18 at 09:10
Yes, your column is not a `checkcolumn`, but the how to get the record still holds for all other grid events as well (the record is usually a parameter to the event). I used a checkcolumn so I could keep the example as small as possible, since all other column types require at least an editing plugin. – Alexander May 16 '18 at 09:35

score 2 · Answer 2 · answered May 14 '18 at 20:17

You do have a store connected to the grid - that's how the grid works. It's just that the store isn't connected to a Proxy, and that's absolutely fine.

The cells are flagged because the store thinks those records are unsaved. To clear the flags, you need to change what the store thinks. You can do this with the commitChanges method on the Store object. e.g.:

success: function( response, opts ) {
  grid.getStore().commitChanges();  
},

Alternatively, you can hide the red flags altogether by configuring the grid not to show them. You do this by providing a viewConfig to the grid when constructing or initialising it:

viewConfig: { showDirty: false }

Ext Js 6.0.0 remove table's small red dirty cell flags manually

2 Answers2