another asp.net/jayrock with Ext integration

[mdissel]

I've created another approach to work more generically with every Ajax.request. (based on the AjaxPro adapter code)

see http://extjs.com/forum/showthread.php?t=8112 for the original thread.

Code:

var ext_channel = function(call)
{
    if (typeof(call.callback) !== 'function')
        throw new Error("The EXT channel does not support synchronous methods.");        
    call.yuiconn = Ext.Ajax.request (
        {
            url: call.url , 
            params: {"JSON-RPC": Ext.encode(call.request)} , 
            success: function(response, options) {
				call.callback(response.responseText);
			},                            
            failure: function(response, options) {
				// not sure what to do here...should be routed to global error handler if available
                call.callback(response.responseText); 
            }   
        }
    );
    return call ; 
};

Ext.data.Connection.prototype.handleResponse =
Ext.data.Connection.prototype.handleResponse.createInterceptor(function(response) {
	var respht = Ext.util.Format.trim(response.getResponseHeader["Content-Type"]) ;
	if (respht == "application/json; charset=utf-8") {
        var r = Ext.decode(response.responseText);
        if (r.result !== undefined) {
            response.responseText = r.result;
        } else if (r.error) {
        		response.responseText = r.error;
            this.handleFailure(response);
            return false;
        }
    }
});

and a sample to use the JayRock demo sample:

First include the JsonRpcHandler in your head section like this
Code:

<script type="text/javascript" src="demo.ashx?proxy&v=2"></script>

and to call your function like this:
Code:

DemoService.rpc.echo("yes i did it!", function(r){
 alert(r);
}).call(ext_channel);

Now it's even possible to do (if the server side returns a (html) string):
Code:

Ext.get('element').load('handler.ashx/list?param1=2&param2=1');

Tips/modifications are welcome!!

Thanks
Marco

[mdissel]

I've updated the first post to fix a problem with the Content-Type header check in IE.

(thanks to FritFrut)

Marco

[dot99]

Please, give example of usage with grid.

[mdissel]

the declaration of the store of your grid is something like this:

new Ext.data.JsonStore({  
    	    url: 'test.ashx/Search',
	    id: 'someKeyField',
	    fields: ['Field1',..., 'FieldX']
		})

and then call
grid.load({param:...});

Thanks

Marco

[dot99]

It fails when I try to call with
ds.load({params:{start:0, limit:5, sort:"id", dir:"asc"}});

But when I try to call without params it's ok: ds.load();

The problem is not in server side since it does not sort or page data yet.
During debugging I was never inside
var ext_channel = function(call) {...}

The error:

[ArgumentNullException]: Value cannot be null.
Parameter name: s
at System.IO.StringReader..ctor(String s)
at Jayrock.JsonRpc.Web.JsonRpcExecutive.GetRequestReader()
at Jayrock.JsonRpc.Web.JsonRpcExecutive.ProcessRequest()
at Jayrock.JsonRpc.Web.JsonRpcServiceFeature.ProcessRequest(HttpContext context)
at Jayrock.JsonRpc.Web.JsonRpcHandler.ProcessRequest()
at Jayrock.JsonRpc.Web.JsonRpcHandler.ProcessRequest(HttpContext context)
at System.Web.CallHandlerExecutionStep.System.Web.HttpApplication+IExecutionStep.Execute()
at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously)



The Request Headers:
.....
Connection keep-alive
X-Requested-With XMLHttpRequest
Content-Type application/x-www-form-urlencoded
Referer https://localhost/............
Content-Length 36
Cookie ......
Pragma no-cache
Cache-Control no-cache

[mdissel]

the ext_channel is never called, because you're not using a json method. My first sample was based on changes i made to the jayrock implementation (see my patch at the berlios project site).

If you want to use the servers side methods to load data in a grid:

Test.search( .....params ....., function(r){
			grid.getStore().loadData(r.responseText);
		}).call(ext_channel);

where search is methd defined at the server side..

Thanks

Marco

[taert]

Hello Marco,

I've been trying to get this to work for quite some time now, but it just keeps throwing me this error when I want to load data into a grid:

[Exception... "'Error: The EXT channel does not support synchronous methods.' when calling method: [nsIDOMEventListener::handleEvent]"  nsresult: "0x8057001c (NS_ERROR_XPC_JS_THREW_JS_OBJECT)"  location: "<unknown>"  data: no]

A clear (full) example of how to use this with a grid would be greatly appreciated!

Thanks very much

Tom

[FritFrut]

A clear (full) example of how to use this with a grid would be greatly appreciated!

Hello
There's a more or less full example in the original thread:
http://extjs.com/forum/showthread.php?t=8112
and in the tutorial:
http://extjs.com/learn/Tutorial:Jayrock_with_Ext
It's a bit different from Marco's version, but works with grid.

There's only one place to check for callback, at the beginning of the ext_channel, so you should make a breakpoint there and check if there's callback property, and what's its type (perhaps it's a 'string' instead of 'function' ?).

[taert]

Hello FritFrut,

First of all, thanks a lot for your response. I already found this tutorial, but that one also wasn't working for me. Undoubtedly it's me being too stupid to fill in the missing pieces myself. The Jayrock part is working just fine. Also, if I set up a simple grid, using a simple Data Store and nothing special, everything works fine. Only paging doesn't work. But if I try to implement the tutorial or Marco's way, nothing works...

If someone could just post a working example, it would really make my day!

Tom

[FritFrut]

But if I try to implement the tutorial or Marco's way, nothing works...

Hmm... I really can't say. Perhaps you are mixing the code from the tutorial and Marco? I don't think they'll mix very well . Also, I'm not sure, but I think that Marco's solution can't handle paging, at least not with the default paging toolbar, because PagingToolbar directly calls load on datastore, so you don't go through the ext_channel, as Marco already explained. My code (tutorial) does paging well, because you can create Store using the JsonRpcProxy, but it's a bit complicated and I don't like to have a new Proxy class just to make paging work... (however, it makes halfway decent tutorial
So, if you want to make Marco's code work, you should just take his interceptor and channel and do something like this (using the names from the tutorial)

function _createDataStore() 
{
    var recDef = createRecord() ;
    var ds = new Ext.data.JsonStore({  
//        url: "handlers/myobjecthandler.ashx", 
// it seems that the url is not needed, your Jayrock proxy takes care of it
// !!Note that root and totalProperty are different from tutorial
        root: "data", totalProperty: "total",  
        id: "Id",
	fields: recDef 
    }) ;
    return ds ;
}

myObject.rpc.list(0 /*start*/, 5/*limit*/, "" /*sort*/, "" /*dir*/,
 function(r)
 {
   theDataStore.loadData(r.responseText)
 } ).call(Tom.JsonRpcProxy.ext_channel1)

But, as I said, you can't use paging with this... so it's about the choice, should you write custom pager, or use the code from the tutorial and find what's not working.
HTH, Tom