[1.x] EditorGrid with pagination - ModifiedRecords inconsistency

[liotrox]

Hi
I'm using the EditorGrid for editing data with also the PagingToolbar to allow pagination.

The problem is that if I edit a field in page 1 and then move on page 2 and go back in page 1 (or simply refresh the page 1) the grid doesn't highligh the edited cell (it reports the original value) but the gridObj.getDataSource().getModifiedRecords() remember the edited record with the new value.
The side effect is that when I try to save, the grid will save also data that are not currently displayed in the grid.

It is easy to reproduce the error performing some modifications in the 'Paging and Remote Dataset' example from the documentation (the code modification is reported below).
The operation steps to reproduce the problems are:
1. Load the page in Firefox
2. Modify the first author field (you will see the red marker that highligh the modified cell)
3. Click the 'show modified records' link and you will see that in the firefox console there is 1 record modified
4. Click the reload button in the grid toolbar (or goto to page 2 and go back to page 1)
5. Click the 'show modified records' link and you will see that in the firefox console there is 1 record modified but no cells are marked as changed! :(( :(( :((

In the paging.html add this code


<script>
function test() {
console.debug('modified records', gridObj.getDataSource().getModifiedRecords());
}
</script>

<a href="javascript:test();">show modified records</a>
<br><br><br><br>


An the the paging.js modify the grid in this way:
- Set as editable (and visible) the author column
- create an EditorGrid instead of a Grid
- setup the clicksToEdit
- assign the grid object to a global variable that can easily retrieved in the html page


var cm = new Ext.grid.ColumnModel([{
id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: "Topic1",
dataIndex: 'title',
width: 490,
renderer: renderTopic,
css: 'white-space:normal;'
},{
header: "Author",
dataIndex: 'author',
width: 100,
hidden: false,
editor: new Ed(new fm.TextField({
allowBlank: false
}))
},{
id: 'last',
header: "Last Post",
dataIndex: 'lastPost',
width: 150,
renderer: renderLast
}]);



// create the editor grid
var grid = new Ext.grid.EditorGrid('topic-grid', {
ds: ds,
cm: cm,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
enableColLock:false,
clicksToEdit :1,
loadMask: true
});

gridObj = grid;

[jsakalos]

Just my 2 cents...

I'm also using paging editor grids and I've also run into the problem of how to prevent user from paging after he/she edited some cells. Paging to another page means that new set of records is loaded into data store and all changes are lost.

The solution I've chosen is stupid simple: I disable (mask) the paging toolbar after user edited a cell and re-enable it if he either saves the changes or resets (restores original values). Grid has Save and Reset buttons that have reversed logic: if grid has dirty records they are enabled if not they are disabled.

With all these bits and pieces in place the UI is very intuitive and I can only recommend it.