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 !
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 !