ExtJS Grid roweditor still dirty after grid save and store reload

Question

I'm using ExtJS 5.1.3, I have a grid which is loaded from a store which has a model. The grid is set to use plugin roweditor, so I edit a cell and give it a new value, at this point the red tick is shown that the cell has been changed.

I have a Save button which when clicked gets the store.getModifiedRecords() and passes these off to a ajax request, upon success of this request a few things happen and the last action I do is to load the grid store again which then populates the grid again with the latest version of the data, this is fine and seems to be working as expected.

As this is a multi page application I also have a check when a user navigates away from this page, this is to catch any unsaved grid changes, so basically I get any form from the page and verify the isDirty() value, this is where I am finding my issue, the roweditor is being returned as dirty, this is because some columns have an editor and ExtJS uses form validation on these fields,

I can't understand why the store loading again has not cleared any dirty fields associated with the grid columns? I've tried a number of things such as clearing the store prior to ajax request along with refreshing the grid view, I've tried committing the store changes prior to doing the ajax request but each time I try navigate away from the page after a grid save I pick up the roweditor as having dirty fields :( any help is greatly appreciated.

EDIT: managed to replicate on a simple fiddle

https://fiddle.sencha.com/#view/editor&fiddle/1rmf

The fiddle is basic, to replicate follow these steps;

• edit first row age, change age to 13
• click Save (i'm forcing the store to load data which has the change we've made)
• click 'Check roweditor is Dirty() value' button to see the value of the roweditor isDirty() function, this will return true

if you look at the button handler, you can drill into forms[0].items.items[2] and see that this field has dirty: true which is why isDirty() is returning true.

SOLUTION

As explained in accepted answer, the roweditor is not affected by the store edit/cancel or load in my case. What I did when clicking on 'Save' was to get the grid, then the editor and it's form and called reset() on this so effectively sync everything again.

grid.editingPlugin.getEditor().form.reset();

you can also get access to plugins via grid.getPlugins() which returns an arrary

updated fiddle to show it working

https://fiddle.sencha.com/#view/editor&fiddle/1rmr

Answer 1

During the editing process grid will eventually call loadRecord on the editor's form. However the editor's form is not cleared upon editing success or canceling. That is why your check for dirtyness returns false. Grid reloading the data is not destroying the editors. It is an optimisation. Editors are created only once and they are destroyed along with the grid.

Answer 2

I'll try to answer regarding to an experience of mine with an all ExtJS desktop application.

By the way looking quickly over your description, you may have to call the Store.sync() method that refreshes your store.

Looking more deeply, there are many way to make CRUD using ExtJs.

I've been made using the "instance" of store but at certain point I had to change it to static calls like MyApp.store.Model.save() etc. That makes you have only one instance of the store avoiding dirty data.

Here's my project folder if you need

https://github.com/guilhermeribeirodev/grizzlyboilerplate/tree/master/src/main/webapp/js/MyApp