PDA

View Full Version : Grid & RowEditing - Records still flagged as "dirty" after update



Pacos
25 Nov 2011, 5:38 AM
Hello,

I'm trying to set up a grid with row editing capability. This should be pretty easy considering the official examples, but I am facing an issue.

What I want to do :
- display a grid which contains a rowediting plugin
- be able to modify some values and update them in a database

So, I fired up a grid, with a row editing plugin, and a store with api urls specified. When I edit values contained in a row, data is sent to the server, which updates the database and send back a confirmation message.
BUT : the modified records are still flagged as "dirty" : the show a red triangle in the upper left corner. Obviously I don't want that, and I think I missed something important in the process (I'm new to ajax and related technologies).

Here is the store :


var userSessionStore = new Ext.data.JsonStore({
autoDestroy: true,
autoSync: true,
storeId: 'userSessionStore',
proxy: {
type: 'ajax',
api: {
create : 'SessionCreator',
read : 'SessionReader',
update : 'SessionUpdater',
destroy : 'SessionDestroyer'
},
reader: {
type: 'json',
root: 'user_sessions',
idProperty: 'sid'
}
},
fields: ['sid', 'thour', 'troom', 'sitm', 'snad', 'snrb', 'tname', 'splayer', 'sdt', 'tid'],
sorters: [{
property: 'sdt',
direction: 'DESC'
},{
property: 'thour',
direction: 'DESC'
},{
property: 'troom',
direction: 'ASC'
},{
property: 'tname',
direction: 'ASC'
}]
});

Here is the grid :


var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false
});

var gridUserSession = Ext.create('Ext.grid.Panel', {
title: 'Sessions draft',
store: userSessionStore,
width: '100%',
height: 262,
plugins: [rowEditing],
columns: [{
id:'troom',
header: 'Room',
dataIndex: 'troom',
sortable: true,
flex: 1
},{
id:'tname',
header: 'Tournament',
dataIndex: 'tname',
sortable: true,
flex: 1
},{
id:'thour',
header: 'Hour',
dataIndex: 'thour',
sortable: true,
flex: 1
},{
id:'sdt',
header: 'Date',
dataIndex: 'sdt',
sortable: true,
flex: 1
},{
id:'splayer',
header: 'Player',
dataIndex: 'splayer',
sortable: true,
flex: 1
},{
id:'snrb',
header: 'Rebuys',
dataIndex: 'snrb',
sortable: true,
flex: 1,
editor: {
xtype: 'numberfield',
allowBlank: false,
allowDecimals: false
}
},{
id:'snad',
header: 'Addon',
dataIndex: 'snad',
sortable: true,
flex: 1,
editor: {
xtype: 'numberfield',
allowBlank: false,
allowDecimals: false
}
},{
id:'sitm',
header: 'Total ITM',
dataIndex: 'sitm',
sortable: true,
flex: 1,
editor: {
xtype: 'numberfield',
allowBlank: false
}
}]
});

Here is the JSON sent back by the server :


{success: true, message: "Updated record", data: {"sid":"5","thour":"22:30","troom":"PS","snad":10,"sdt":"2011-09-06","tname":"Nightly","sitm":50,"splayer":"StakeO","tid":"24","snrb":7}}

I'll appreciate any kind of help ! Thanks !

tobiu
25 Nov 2011, 5:46 AM
model.commit();


should clear all dirty flags.

Pacos
25 Nov 2011, 6:21 AM
Thanks for your answer !

For the record, I added a listener to the grid :


listeners: {
'edit': function(editor, e) {
editor.record.commit();
}
}

It seems (it's in the comments of this event, described in the documentation of Ext.grid.plugin.RowEditing) that "editor" contains the properties that should be in "e". According to the comments it's fixed in v4.1, but I'm running v4.0.7.