PDA

View Full Version : Ext Direct & Grid with RowEditor



noelmartin
29 Sep 2009, 12:17 PM
How do I catch and handle the update event of a Ext DirectStore.
My code looks like this


LookupLists_Admin_IdValueGrid = function(table){
this.tableName = table;

this.dataStore = new Ext.data.DirectStore({
paramsAsHash:true,
autoLoad: true,
root: 'data',
idProperty: 'id',
totalProperty: 'total.totalcount',
baseParams: {start:0,limit:10,sort:'name',dir:'ASC', tableName: this.tableName},
fields: [ "id", "name" ],
api: {
read: OM_LookupLists.getListValues,
create: OM_LookupLists.getListValues,
destroy: OM_LookupLists.getListValues,
update: OM_LookupLists.getListValues
},
paramOrder: ['start','limit','sort','dir','tableName']
});

this.editor = new Ext.ux.grid.RowEditor({
saveText: 'Update'
});

LookupLists_Admin_IdValueGrid.superclass.constructor.call(this, {
title: 'List',
region: 'center',
closable: true,
loadMask: {msg:'Loading list data...'},
viewConfig: { autoFill: false },
plugins: [this.editor],
sm: new Ext.grid.RowSelectionModel({ singleSelect:true }),
store: this.dataStore,
columns: [
{header: 'ID', dataIndex: 'id', width: 100, sortable: true},
{header: 'Value', dataIndex: 'name', width: 300, sortable: true, editor: {xtype: 'textfield',allowBlank: false}}
]
]
});
}

Ext.extend(LookupLists_Admin_IdValueGrid,Ext.grid.GridPanel,{
});


The read api works and my grid loads.
The RowEditor works and marks a cell dirty after updates.
But the update api will not fire

jimmifett
29 Sep 2009, 5:36 PM
look at your api. each portion has the read function refenced. your update block needs to reference your underlying update method. you will be passing 2 args, an ID of the row being edited, and a struct holding the modified data. i like to specify that all the data for a row is sent, not just the modified columns. makes for cleaner parameterized queries IMO.

noelmartin
29 Sep 2009, 7:56 PM
I have solved this now, looks like I needed a writer for my directStore.
The challenge I now have is, how do I include custom params (in this case tableName) that has to be passed along with the record for the update api request.

this is what gets posted with the resquest


{"action":"OM_LookupLists","method":"updateListValues","data":["2","{\"name\":\"Deafxxxxs\",\"id\":\"2\"}"],"type":"rpc","tid":6}


Heres the complete code


LookupLists_Admin_IdValueGrid = function(table){
this.tableName = table;

this.dataStoreWriter = new Ext.data.JsonWriter({
encode: true,
writeAllFields: false
});

this.dataStore = new Ext.data.DirectStore({
//paramsAsHash:true,
directFn: OM_LookupLists.getListValues,
autoLoad: true,
autoSave: true,
root: 'data',
writer: this.dataStoreWriter,
idProperty: 'id',
totalProperty: 'total.totalcount',
baseParams: {start:0,limit:10,sort:'name',dir:'ASC', tableName: this.tableName},
defaultParamNames: {tableName: this.tableName},
fields: [ "id", "name" ],
api: {
read: OM_LookupLists.getListValues,
create: undefined,
destroy: undefined,
update: OM_LookupLists.updateListValues
},
paramOrder: ['start','limit','sort','dir','tableName']
});

this.editor = new Ext.ux.grid.RowEditor({
saveText: 'Update'
});

LookupLists_Admin_IdValueGrid.superclass.constructor.call(this, {
title: 'List',
region: 'center',
closable: true,
loadMask: {msg:'Loading list data...'},
viewConfig: { autoFill: false },
plugins: [this.editor],
sm: new Ext.grid.RowSelectionModel({ singleSelect:true }),
store: this.dataStore,
columns: [
{header: 'ID', dataIndex: 'id', width: 100, sortable: true},
{header: 'Value', dataIndex: 'name', width: 300, sortable: true, editor: {xtype: 'textfield',allowBlank: false}}
],
tbar: [
{
text: 'Add',
handler: function(){},
scope: this
}
]
});
}

Ext.extend(LookupLists_Admin_IdValueGrid,Ext.grid.GridPanel,{

});

jimmifett
30 Sep 2009, 2:39 AM
directFn and api are utually exclusive

noelmartin
30 Sep 2009, 4:05 AM
Thanks jimmifett.
I've got them working now.
Do you have any clues on how I could include custom params to be sent besides the default data structure that is passed to the backend after an update event.
I've tried including the
defaultParamNames: {tableName: this.tableName}, in my store but that does not seem to help

jimmifett
30 Sep 2009, 5:04 AM
I haven't tried doing that, but i would think the baseParams would take care of that. you just have to remember that they are usually passed as URL parameters and may or may not be present in the ajax call as json data. you could verify this with fiddler2. you may wish to hard code the this.table string for testing.

As an asside, I am presuming you are passing the table name for some sort of dynamic query manipulation on the table specified?

you may want to re-think that appraoch as it can allow someone to specify any table in your db >:)

noelmartin
30 Sep 2009, 10:33 AM
I've got a number of identical tables in my db that serve data for lists on my frontend. Simple id and value columns in each identical table. Hence I came up a grid that can take the tableName as an arg and then perform the load, update, add and destroy events. The load works perfectly picking up this.tableName from the baseParams and serving the data. With the update event though, I'm struggling with a straightforward way to pass this custom argument(tableName).
I'll check with fiddler2 though, and thanks for the lead.