Ext and Ajax Pro

[rodiniz]

I have posted a sample showing some classes I created to integrate Ext with Ajax Pro .My code makes possible to realize an old dream "bindind" the grid to a .net dataset.
See it here
http://www.rodrigodiniz.qsh.eu/datasetYahooGrid.aspx
Ext 1.0 Alpha 2 Rev 5 is needed.

[rodiniz]

One more sample using Ext and AjaxPro..this time I Load a TreePanel with a generic List
http://www.rodrigodiniz.qsh.eu/treepanesample.aspx

[Choleriker]

Nice! I have done it similary by using NewtownSoft JSON Serializer because i have found an issue in AjaxPro. The problem is that AjaxPro dont handles membership and forms-authentication informations correct using yui-connection. It looses the roles of the logged-in user maybe. While i was testing ajax-pro for using this was in beta state.

The second thing i found not really nice was that ajaxpro using own methods to get connections and read from it. So you have many lines of js-scripts more to load to the end-user. Have you changed the connection-functions of ajax-pro using yui-ext?

[rodiniz]

You can see what I did in the AjaxProProxy.js that is on both pages...
Thats all..nothing more , nothing else.

[PortraitPainter]

Thanks rodiniz I will be looking at your example JS code in detail because I want to get my head around effective integration of Ext and AjaxPro. By the end of the year I think integration with server-side frameworks will become the new Ext frontier.

[Choleriker]

Thanks rodiniz I will be looking at your example JS code in detail because I want to get my head around effective integration of Ext and AjaxPro. By the end of the year I think integration with server-side frameworks will become the new Ext frontier.

Hey im interested in your work! I think asp.net is a strong solution for rad-development, and yui-ext is the best solution for client-side. Until now i have integrated many things of yui-ext into asp.net. If you interested in mines, you can send me a email to communicate: mb@tecbehind.de, maybe i have code for you so you dont need to rewrite it.

[PortraitPainter]

Wow Rodiniz have just been profiling your grid page requests, those Ajax.Net Pro requests fly!

Subtracting my lengthy UK based ping time and we're talking under 70ms page fetches, what does your IIS log show?

For those not familiar with Ajax.Net Pro, its developer implemented a custom JSON formatter for the MS DataSet class, this normalizes out the field type info which means the bulk of the HTTP request is pure data.

new Ajax.Web.DataSet([new Ajax.Web.DataTable([["ID_MOVIE","System.Int32"],["TITLE","System.String"],

["GENRE","System.String"],["RATING","System.String"],["VOTES","System.Int32"],["YEAR","System.Int32"

]],[[112,"Kaze no tani no Naushika","Animation","8.0",3279,1984],[113,"Toy Story","Animation","8.0",46815

,1995],[114,"Beauty and the Beast2","Action","8.0",25575,1991],[115,"Fantasia","Animation","8.0",14878

,1940],[116,"The Iron Giant","Animation","8.0",15104,1999],[117,"The Nightmare Before Christmas","Animation"

,"8.0",19559,1993],

[mdissel]

One more sample using Ext and AjaxPro..this time I Load a TreePanel with a generic List
http://www.rodrigodiniz.qsh.eu/treepanesample.aspx.

Thanks!! Nice samples.. AjaxPro has a very low overhead.. you could even remove the extra __type attribute to minimize the traffic even more..

Marco

[rodiniz]

Wow Rodiniz have just been profiling your grid page requests, those Ajax.Net Pro requests fly!

Subtracting my lengthy UK based ping time and we're talking under 70ms page fetches, what does your IIS log show?

For those not familiar with Ajax.Net Pro, its developer implemented a custom JSON formatter for the MS DataSet class, this normalizes out the field type info which means the bulk of the HTTP request is pure data.

new Ajax.Web.DataSet([new Ajax.Web.DataTable([["ID_MOVIE","System.Int32"],["TITLE","System.String"],

["GENRE","System.String"],["RATING","System.String"],["VOTES","System.Int32"],["YEAR","System.Int32"

]],[[112,"Kaze no tani no Naushika","Animation","8.0",3279,1984],[113,"Toy Story","Animation","8.0",46815

,1995],[114,"Beauty and the Beast2","Action","8.0",25575,1991],[115,"Fantasia","Animation","8.0",14878

,1940],[116,"The Iron Giant","Animation","8.0",15104,1999],[117,"The Nightmare Before Christmas","Animation"

,"8.0",19559,1993],

The request are fast for two reasons..
1) AjaxPro rocks !!
2)I am using a query thatr returns only the current page using the new RowCount in
sql 2005

[rodiniz]

One more sample using Ext and AjaxPro..this time I Load a TreePanel with a generic List
http://www.rodrigodiniz.qsh.eu/treepanesample.aspx.

Thanks!! Nice samples.. AjaxPro has a very low overhead.. you could even remove the extra __type attribute to minimize the traffic even more..

Marco
I am using AjaxPro as it is.... no extra code on the server-side to return the custom class.
I could write something to remove the __type.. but I wanted to prove that I could use AjaxPro as is to return a custom class and use to populate the TreePane.

[mdissel]

How are you dealing with the viewstate/postbacks with Ext / AjaxPro?

Ideally i would get rid of the viewstate/postback and only use Ext for UI, AjaxPro for communication to the .NET server side..

have you already dealed with form submits through AjaxPro? I don't want to deal with the Form Requests collection at server-side, but with objects (so you have compile time checking of variables)..

Thanks

Marco

[mdissel]

I see that you've override the Ext.data.Connection only to add support for an extra header:

//rodrigo here
if(this.AjaxProMethod){
YAHOO.util.Connect.initHeader("x-ajaxpro-method",this.AjaxProMethod);
}
//end rodrigo

Maybe we should ask Jack to add an config option to add an extra header for a connection, so you can elimate the extra override..

THanks

Marco

[rodiniz]

I see that you've override the Ext.data.Connection only to add support for an extra header:

//rodrigo here
if(this.AjaxProMethod){
YAHOO.util.Connect.initHeader("x-ajaxpro-method",this.AjaxProMethod);
}
//end rodrigo

Maybe we should ask Jack to add an config option to add an extra header for a connection, so you can elimate the extra override..

THanks

Marco

I already did and he asked me if there was another way of doing this and
I would have to figure out how to do that with jquery

[rodiniz]

The tree Pane sample is updated and now show some basic tree operations
like contextmenu for adding and removing tree nodes.
The changes made to the tree are not persisted.

[amackay11]

Good work. Is it possible to see what is in your AjaxFunction 'GetMovies' method with your grid example? I'm trying to get the complete picture and am somewhat newbish. Thanks.


proxy: new Ext.data.AjaxProProxy(
{
url:'ajaxpro/AjaxFunction.AjaxUtils,AjaxFunction.ashx',
AjaxProMethod:'GetMovies'
}
),

[rodiniz]

Sure...
http://www.rodrigodiniz.qsh.eu/datasetcode.htm

[harley.333]

One of the main features of AjaxPro (from its initial reason when it was still called AJAX.Net), is that it can generate a javascript wrapper for communicating with the server. Rodiniz's solution bypasses the generated wrapper and uses Jack's "Ext.data.Connection" class. (Of course, Jack's class merely wraps your base library of choice.)

I wanted to continue using the AjaxPro wrappers so I took Rodiniz's solution (thanks, btw) and changed it up a bit. I didn't need to override Jack's Connection class; it's my opinion that the connection between layers needs to be an unobtrusive as possible.


Ext.data.AjaxProxy = function(ajaxProObject, method) {
Ext.data.AjaxProxy.superclass.constructor.call(this);
this.ajaxProObject = ajaxProObject;
this.method = method;
};
Ext.extend(Ext.data.AjaxProxy, Ext.data.DataProxy, {
load: function(params, reader, callback, scope, arg) {
if(this.fireEvent("beforeload", this, params) !== false) {
var s = [];
for (var x in params) {
s[s.length] = "params[\"" + x + "\"]";
}
s = s.join(",");
var o = {
params: params || {},
request: {
callback : callback,
scope : scope,
arg : arg
},
reader: reader,
callback: this.loadResponse,
scope: this
};
eval("this.ajaxProObject[this.method](" + s + ", this.loadResponse, o)");
} else {
callback.call(scope||this, null, arg, false);
}
},
loadResponse: function(response, request) {
var o = response.context;
var self = o.scope;
if(!!response.error) {
self.fireEvent("loadexception", self, o, response.error);
o.request.callback.call(o.request.scope, null, o.request.arg, false);
return;
}
var result;
var json = {responseText: response.json.substring(0, response.json.length - 3)};
try {
result = o.reader.read(json);
} catch(e) {
self.fireEvent("loadexception", self, o, json, e);
o.request.callback.call(o.request.scope, null, o.request.arg, false);
return;
}
o.request.callback.call(o.request.scope, result, o.request.arg, true);
}
});


You use this class with the following (the "ASP.page1_aspx" is the generated wrapper):

var s = new Ext.data.Store({
proxy: new Ext.data.AjaxProxy(ASP.page1_aspx, "Method1"),
reader: new Ext.data.JsonReader({id: "PrimaryId"}, [
...columns...
])
})
s.load({params: {param1: "value1", param2: "value2"}});


Personally, I use custom message objects for communication between all of my tiers (DataSets are so barbaric ;) ). My messages are Serializable, and AjaxPro turns them into JSON easily (I believe AjaxPro returns "secure" JSON).

I hope someone finds this useful.

[rodiniz]

Nice, I used the connection headers cause thats the way Michael (author of AjaxPro) recommends.
Does your server method returns a Dataset?

[harley.333]

I don't use DataSet or DataTables. I create my own custom message objects. I'm willing to share my bad-ass .Net code if you're interested ;)

What I like most about this solution is that I'm using all of Michael's generated javascript code. If he improves upon or changes it in anyway, my Ext code won't have to change (at least, that's the theory).

[yui-ext is cool]

Harley.33, any chance you can post the .net source code of a simple working example?

[lowmemory]

Hi rodiniz,
Do you have a solution like http://www.rodrigodiniz.qsh.eu/datasetcode.htm
working for SQL Server 2000?

Thanks.

Marco

[amackay11]

Marco,
I am using rodiniz's code with SQL 2000 and it works fine. I am using ASP 2.0 on my IIS server.

Andy

[lowmemory]

amackay11,

the ROW_NUMBER function used in the sql statement is available only in SQL Server 2005.

See the comments in: http://www.rodrigodiniz.qsh.eu/datasetcode.htm
(// using the new ROW_NUMBER function in sql2005)

Marco

[amackay11]

OK...sorry. I'm not using the rowcount/paging features. My guess is you'll need to select the whole dataset and track each page's start and end records.

[rodiniz]

Here is a topic that shows how to build a query that returns only the current page records for sql 2000
http://extjs.com/forum/showthread.php?t=2861

[lowmemory]

Thank you rodiniz!
I found usefull GetRows(...).

Marco

[timb]

harley.333, would you mind sharing your .net code? I'm interested in seeing how you pass your objects.

I just posted yet another way to pass headers if using YUI with Ext, if anyone is interested:
http://extjs.com/forum/showthread.php?p=24978

This is closer to rodiniz's method than harley.333's method, as it doesn't use the AjaxPro generated javascript code (lightens up the page a bit since there are 3 less javascript files).

[amackay11]

I wanted to continue using the AjaxPro wrappers so I took Rodiniz's solution (thanks, btw) and changed it up a bit. I didn't need to override Jack's Connection class....


I merged harley's connection code with rodiniz's (Ajax.Web.Dataset - Ext.Data.Store) as follows:


ds = new Ext.data.Store({
proxy: new Ext.data.AjaxProxy(myAsp, "GetMovies"),
reader:reader,
remoteSort: true
});

AjaxProProxy.js

Ext.data.AjaxProxy = function(ajaxProObject, method) {
Ext.data.AjaxProxy.superclass.constructor.call(this);
this.ajaxProObject = ajaxProObject;
this.method = method;
};
Ext.extend(Ext.data.AjaxProxy, Ext.data.DataProxy, {

// Harley's load function
load: function(params, reader, callback, scope, arg) {
if(this.fireEvent("beforeload", this, params) !== false) {
var s = [];
for (var x in params) {
s[s.length] = "params[\"" + x + "\"]";
}
s = s.join(",");
var o = {
params: params || {},
request: {
callback : callback,
scope : scope,
arg : arg
},
reader: reader,
callback: this.loadResponse,
scope: this
};

eval("this.ajaxProObject[this.method](" + s + ", this.loadResponse, o)");

} else {
callback.call(scope||this, null, arg, false);
}
},


// Rodiniz's response handler

loadResponse: function(response, request) {

var o = response.context;

var result;
try {
result = o.reader.read(response.json);

}catch(e){
this.fireEvent("loadexception", this, o, response, e);
o.request.callback.call(o.request.scope, null, o.request.arg, false);
return;
}
o.request.callback.call(o.request.scope, result, o.request.arg, true);
},



slight mod in Rodiniz's reader....

read : function(response){

var r= new Object(); //to handle errors
var obj=response + "*/";
var doc = eval(obj);
if(r.error){
throw r.error;
}
return this.readRecords(doc);
},

[rodiniz]

Hi Timb I am using the javascript generated by the ajaxpro only because I am returning a Dataset , that is transformed by ajaxPro into an javascript class.(defined in core.ashx).
That will soon change when Michael releases the new version of AJaxPro.

[harley.333]

I'll post my .Net code in a few days. I've been swamped and I'm trying to lay low.

[timb]

For those interested in using AjaxPro and Ext together, please see the following post. I would like to get some opinions on this before I submit it to be included with AjaxPro:
http://extjs.com/forum/showthread.php?p=28287#post28287