Wednesday, June 11th, 2008
Leveraging Ext JS on the Server via Jaxer
When Aptana released Jaxer, it really excited the community because you could now leverage your client-side skills on the server end of things. Rich Waters of Ext JS talks about how to leverage Ext JS on the server via Jaxer. The code created by Rich creates a Ext JaxerStore which allows you to run queries and directly put them into a Ext Store. This has the benefit of leveraging the same Ext language syntax you've become accustomed to for server-side processing by allowing Jaxer to wrap client and server-side communications up allowing either synchronous or asynchronous calls between the client and server.
I asked Rich why would developers do this versus doing a simple Ajax call to a template sitting on a server:
The template bit lets you generate the html before the page is served up so that no extra client side calls are necessary. I think the Ext template system is really slick and easier than even a lot of other existing server side templating systems. More or less it was also just an example to get people thinking about what could be done now that Ext can be run server-side.
The code snippet allows you to make the calls to Jaxer very easily:
-
-
Ext.onReady(function() {
-
var store = new Ext.data.JaxerStore({
-
table : 'demo',
-
fields : [
-
{name : 'name'},
-
{name : 'phone'},
-
{name : 'email'}
-
],
-
readerConfig : {
-
sortInfo : {
-
sort : 'name',
-
dir : 'asc'
-
}
-
}
-
});
-
-
// create the Grid
-
var grid = new Ext.grid.GridPanel({
-
store : store,
-
columns : [
-
{header : "Name", sortable : true, dataIndex : 'name'},
-
{header : "Phone #", sortable : true, dataIndex : 'phone'},
-
{header : "Email", sortable : true, dataIndex : 'email'}
-
],
-
viewConfig : {
-
forceFit : true
-
},
-
stripeRows : true,
-
height : 350,
-
width : 680,
-
title : 'Jaxer Demo Grid',
-
renderTo : Ext.getBody()
-
});
-
});
-
which would then populate a grid control and render it accordingly.
The source code to this new functionality can be downloaded here.
Leave a comment