PDA

View Full Version : passing parameter using Ext.data.HttpProxy crud api



bryanevil
25 Jun 2010, 11:13 PM
How to post baseparams using this:



var companyinfoProxy = new Ext.data.HttpProxy({
api:{
// Call web service method using GET syntax
read: '/WebServices/Account/WCFCompanyService.svc/GetAll,
create: '/WebServices/Account/WCFCompanyService.svc/Add',
update: '/WebServices/Account/WCFCompanyService.svc/Update',
destroy: '/WebServices/Account/WCFCompanyService.svc/Delete'
}

So far with many different tried, I could only pass like this


var companyinfoProxy = new Ext.data.HttpProxy({
api:{
// Call web service method using GET syntax
read: '/WebServices/Account/WCFCompanyService.svc/GetAll?start=1&limit=25',
create: '/WebServices/Account/WCFCompanyService.svc/Add',
update: '/WebServices/Account/WCFCompanyService.svc/Update',
destroy: '/WebServices/Account/WCFCompanyService.svc/Delete'
}

could I get some sample code please?

Bryan

Animal
25 Jun 2010, 11:28 PM
Yes, it's not that well done. really, each member of the api object should be able to be like an Ajax options object.

I use the following override with my changes in red.



Ext.override(Ext.data.Store, {

execute : function(action, rs, options, /* private */ batch) {
// blow up if action not Ext.data.CREATE, READ, UPDATE, DESTROY
if (!Ext.data.Api.isAction(action)) {
throw new Ext.data.Api.Error('execute', action);
}
// make sure options has a fresh, new params hash *based on the api definition*
if (!options) options = {};
var p = this.api && this.api[action] ? Ext.apply({}, this.api[action].params, options.params) : options.params||{};
options = Ext.apply(options||{}, {
params: p
});
if(batch !== undefined){
this.addToBatch(batch);
}
// have to separate before-events since load has a different signature than create,destroy and save events since load does not
// include the rs (record resultset) parameter. Capture return values from the beforeaction into doRequest flag.
var doRequest = true;

if (action === 'read') {
doRequest = this.fireEvent('beforeload', this, options);
Ext.applyIf(options.params, this.baseParams);
}
else {
// if Writer is configured as listful, force single-record rs to be [{}] instead of {}
// TODO Move listful rendering into DataWriter where the @cfg is defined. Should be easy now.
if (this.writer.listful === true && this.restful !== true) {
rs = (Ext.isArray(rs)) ? rs : [rs];
}
// if rs has just a single record, shift it off so that Writer writes data as '{}' rather than '[{}]'
else if (Ext.isArray(rs) && rs.length == 1) {
rs = rs.shift();
}
// Write the action to options.params
if ((doRequest = this.fireEvent('beforewrite', this, action, rs, options)) !== false) {
this.writer.apply(options.params, this.baseParams, action, rs);
}
}
if (doRequest !== false) {
// Send request to proxy.
if (this.writer && this.proxy.url && !this.proxy.restful && !Ext.data.Api.hasUniqueUrl(this.proxy, action)) {
options.params.xaction = action; // <-- really old, probably unnecessary.
}
// Note: Up until this point we've been dealing with 'action' as a key from Ext.data.Api.actions.
// We'll flip it now and send the value into DataProxy#request, since it's the value which maps to
// the user's configured DataProxy#api
// TODO Refactor all Proxies to accept an instance of Ext.data.Request (not yet defined) instead of this looooooong list
// of params. This method is an artifact from Ext2.
this.proxy.request(Ext.data.Api.actions[action], rs, options.params, this.reader, this.createCallback(action, rs, batch), this, options);
}
return doRequest;
}
});


then




api: {
read: {
url: jsonUrl + '/CustomerClientContact.ashx',
params: {
cmd: 'CustomerClientContactSelectByClientId'
}
},
create: {
url: jsonUrl + '/CustomerClientContact.ashx',
params: {
cmd: 'CustomerClientContactInsert'
}
},
update: {
url: jsonUrl + '/CustomerClientContact.ashx',
params: {
cmd: 'CustomerClientContactUpdate'
}
},
destroy: {
url: jsonUrl + '/CustomerClientContact.ashx',
params: {
cmd: 'CustomerClientContactDelete'
}
}
},

Animal
25 Jun 2010, 11:29 PM
But are you sure you ALWAYS only want 1 to 25???

bryanevil
26 Jun 2010, 12:06 AM
But are you sure you ALWAYS only want 1 to 25???

No, I don't.

What I want is to pass the paging param.

I did successfully test the params to server by JSON at load,

autoLoad: { params: Ext.util.JSON.encode({ start: 0, limit: 2 }) }

but of cause it only work at load. After click the next page, it break and stop pass JSON. No Idea how to make paging work with my httpproxy.

Animal
26 Jun 2010, 2:19 AM
The PagingToolbar of a grid passes these params. You do not access them at all.

To kick off the initial load call



myPagingToolbar.changePage(0);

bryanevil
26 Jun 2010, 6:44 PM
Yes, it's not that well done. really, each member of the api object should be able to be like an Ajax options object.

I use the following override with my changes in red.



Ext.override(Ext.data.Store, {

execute : function(action, rs, options, /* private */ batch) {
// blow up if action not Ext.data.CREATE, READ, UPDATE, DESTROY
if (!Ext.data.Api.isAction(action)) {
throw new Ext.data.Api.Error('execute', action);
}
// make sure options has a fresh, new params hash *based on the api definition*
if (!options) options = {};
var p = this.api && this.api[action] ? Ext.apply({}, this.api[action].params, options.params) : options.params||{};
options = Ext.apply(options||{}, {
params: p
});
if(batch !== undefined){
this.addToBatch(batch);
}
// have to separate before-events since load has a different signature than create,destroy and save events since load does not
// include the rs (record resultset) parameter. Capture return values from the beforeaction into doRequest flag.
var doRequest = true;

if (action === 'read') {
doRequest = this.fireEvent('beforeload', this, options);
Ext.applyIf(options.params, this.baseParams);
}
else {
// if Writer is configured as listful, force single-record rs to be [{}] instead of {}
// TODO Move listful rendering into DataWriter where the @cfg is defined. Should be easy now.
if (this.writer.listful === true && this.restful !== true) {
rs = (Ext.isArray(rs)) ? rs : [rs];
}
// if rs has just a single record, shift it off so that Writer writes data as '{}' rather than '[{}]'
else if (Ext.isArray(rs) && rs.length == 1) {
rs = rs.shift();
}
// Write the action to options.params
if ((doRequest = this.fireEvent('beforewrite', this, action, rs, options)) !== false) {
this.writer.apply(options.params, this.baseParams, action, rs);
}
}
if (doRequest !== false) {
// Send request to proxy.
if (this.writer && this.proxy.url && !this.proxy.restful && !Ext.data.Api.hasUniqueUrl(this.proxy, action)) {
options.params.xaction = action; // <-- really old, probably unnecessary.
}
// Note: Up until this point we've been dealing with 'action' as a key from Ext.data.Api.actions.
// We'll flip it now and send the value into DataProxy#request, since it's the value which maps to
// the user's configured DataProxy#api
// TODO Refactor all Proxies to accept an instance of Ext.data.Request (not yet defined) instead of this looooooong list
// of params. This method is an artifact from Ext2.
this.proxy.request(Ext.data.Api.actions[action], rs, options.params, this.reader, this.createCallback(action, rs, batch), this, options);
}
return doRequest;
}
});


then




api: {
read: {
url: jsonUrl + '/CustomerClientContact.ashx',
params: {
cmd: 'CustomerClientContactSelectByClientId'
}
},
create: {
url: jsonUrl + '/CustomerClientContact.ashx',
params: {
cmd: 'CustomerClientContactInsert'
}
},
update: {
url: jsonUrl + '/CustomerClientContact.ashx',
params: {
cmd: 'CustomerClientContactUpdate'
}
},
destroy: {
url: jsonUrl + '/CustomerClientContact.ashx',
params: {
cmd: 'CustomerClientContactDelete'
}
}
},


Hi Animal

Sorry, I am not good at javascript. I could not find the "execute" method in the API documentation http://www.sencha.com/deploy/dev/docs/?class=Ext.data.Store, so I dont understand what are the argument means.

Most importantly how does this fit to solve the passing parameter problem? For example, pagingtoolbar send postback to server like this start=2&limit=25 when clicked next page, but we are using CRUD, this is my only way make post back successful-
read: '/WebServices/Account/WCFCompanyService.svc/GetAll?start=1&limit=25'

but of course this will aways send start=1&limit=25.

Do I have a solution? This is my last problem to get my grid work, it took me too long time.

Animal
26 Jun 2010, 10:35 PM
What is your problem? The paging toolbar gets pages.

bryanevil
27 Jun 2010, 6:49 PM
I guess I was confusing, sorry.

However I just find the exact problem. ASP.net WCF does not like content-type: application/x-www-form-urlencoded

same problem as this one:http://www.sencha.com/forum/showthread.php?14385-The-Ext-base-forces-application-x-www-form-urlencoded-as-the-content-type

do you have a recommend solution ?

Animal
27 Jun 2010, 11:56 PM
What do you mean "does not like"? That's how parameters are sent in a POST operation.

Do you want to change the method to 'GET'?



api: {
read: {
method: 'GET',
url: jsonUrl + '/CustomerClientContact.ashx',
params: {
cmd: 'CustomerClientContactSelectByClientId'
}
},
create: {
url: jsonUrl + '/CustomerClientContact.ashx',
params: {
cmd: 'CustomerClientContactInsert'
}
},
update: {
url: jsonUrl + '/CustomerClientContact.ashx',
params: {
cmd: 'CustomerClientContactUpdate'
}
},
destroy: {
url: jsonUrl + '/CustomerClientContact.ashx',
params: {
cmd: 'CustomerClientContactDelete'
}
}
},

bryanevil
28 Jun 2010, 12:42 AM
*sign* it was that easy...I have to thank you for so much help. I always make things complicated ..

May I ask you that why I have to add "get"? I knew "get" do append parameters after URL,

but why it doesn't work if I use POST? Post also allow use send parameters to server too, am I correct?

This is the firebug debug when I use POST, the firebug "POST" tab has these value:

Parameters application/x-www-form-urlencoded
limit2
start0
Source
start=0&limit=2
What I need to do to make my asp.net WCF able to read this POST?
What is the default method extjs use?

Animal
28 Jun 2010, 1:03 AM
but why it doesn't work if I use POST?

That's entirely a matter for your server admin.