Ext Direct & Grid with RowEditor

[noelmartin]

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]

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]

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]

directFn and api are utually exclusive

[noelmartin]

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]

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]

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.