PDA

View Full Version : How to send data into server-side by using Ext.data.DirectStore



jeongyej
28 Jan 2014, 10:34 PM
Can someone help me out resolve below issue ?

I'm using Ext.data.DirectStore to do CRUD action in gridPane.
I'm done with loding data from the server successfully, but I got serious error when I tried to remoe record in grid and sync().

Currently, I'm developing it by MVC pattern and below is the store that I defined.



Ext.define('DirectApp.store.DirectStore', {
extend : 'Ext.data.DirectStore',
constructor : function(cfg){
cfg = Ext.apply(this, {
storeId : 'directStore',
model : 'DirectApp.model.DirectModel',
proxy : {
type : 'direct',
api : {
read : DirectSvcImpl.getPersonalAllRPC
},
writer : new Ext.data.JsonWriter({
type : 'json',
encode : true,
writeAllFields : true
})
},
autoLoad : true
});
this.callParent([cfg]);
}
});


Below is the grid panel and I added toolbar to modify or remove record.



Ext.define('DirectApp.view.DirectGrid', {
extend : 'web.common.client.GridPanel',
xtype : 'DirectGrid',
initComponent : function(){
Ext.apply(this, {
id : 'directGrid',
width : 700,
height : 400,
columns : columns,
checkbox : true,
tbar : tbar,
store : Ext.data.StoreManager.get('directStore')
});
this.callParent(arguments);
}
});

var columns = [
{text : 'ID', dataIndex : 'id', width : 70, menuDisabled : true, sortable : false, align : 'right'},
{text : 'First Name', dataIndex : 'firstName', width : 100, menuDisabled : true, sortable : false, align : 'center'},
{text : 'Last Name', dataIndex : 'lastName', width : 70, menuDisabled : true, sortable : false, align : 'center'},
{text : 'Company', dataIndex : 'company', width : 100, menuDisabled : true, sortable : false, align : 'center'},
{text : 'E-Mail', dataIndex : 'email', width : 100, menuDisabled : true, sortable : false, align : 'center'},
{text : 'Birth', dataIndex : 'dob', width : 100, menuDisabled : true, sortable : false, align : 'center'},
{text : 'Age', dataIndex : 'age', width : 50, menuDisabled : true, sortable : false, align : 'right'},
{text : 'Coworker', dataIndex : 'coworker', width : 100, menuDisabled : true, sortable : false, align : 'center'}
];
var tbar = Ext.create('Ext.toolbar.Toolbar', {
items : [{
text : 'Edit',
handler : function(){
var s = Ext.getCmp('directGrid').getStore();
s.sync();
}
},'-',{
text : 'Remove',
handler : function(){
var s = Ext.getCmp('directGrid').getStore();
s.removeAt(0);
s.sync();
}
},'-']
});












When I treid to click "Remove" button, I got error.



TypeError: fn is undefined





fn.apply(window, args);



Below is the detailed error.

Ext.apply(request, {
args: args,
directFn: fn
});
args.push(me.createRequestCallback(request, operation, callback, scope), me);
fn.apply(window, args)

For referene, when I added proxy options, "directFn", this error disappear.
However, I want to use proxy api options.

Lastly, How can I send removed data to server side when I treid to sync store ?

Please give me an advice.

scottmartin
29 Jan 2014, 5:54 AM
You can use extraParams in the proxy



proxy : {
extraParams: {
// params
}
}

jeongyej
29 Jan 2014, 4:48 PM
Thanks for your reply.
One moe question, How can I handle store problem that currently I treid to click the "remove" button,
it shows like below.

TypeError: fn is undefined



fn.apply(window, args)

For reference, it disappear when I defined "directFn" property at proxy.
I heard "api" property replace "directFn". Am I wrong?