Local editing in an Ext grid

Question

I am using Ext's Ext.grid.EditorGridPanel to create a grid and using array-store with local data to populate rows in grid. When I edit the values in grid, they show a small red triangle at top-left, and also the store data is not updated.

So how can I edit local data in EditorGridPanel?

I see a similar problem in Ext Editor Grid Example, though that example also set the URL, see image below.

Solution: As I just needed to save changes locally I just did the following.

settingsGrid.on('afteredit', function(evt){
settingsGrid.store.commitChanges()
})

It fixes the problem and all user edited data is happily updated in the local store.

Answer 1

The red triangle on the top left denotes that the value has been changed. When user change the data in the grid, the store does keep track of the modifications.

If you need to save the modifications, you will have to send the updated data back to server side. You can make use of DataWriter for this.. refer to this example!

Update: If you don't plan to move the updates to server, you can use:

• getModifiedRecords() - to get all the modified records.
• commitChanges() - commit the changes.
• rejectModifiedRecords() - reject all changes on store.

These methods are operations on store on the client side. I think this is what you are looking for.

Answer 2

The Editor Grid Example makes use of an EditorGridPanel without making trips to the server (take a look at the edit-grid.js link on that page). You need to post your code to help us debug your situation.

Make sure that you don't have restful: true defined on your ArrayStore. I would also recommend using the data property rather than url if you want to keep things local.