Wednesday, June 11th, 2008

Leveraging Ext JS on the Server via Jaxer

Category: Aptana, Sencha

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:

javascript

  1. Ext.onReady(function() {
  2.    var store = new Ext.data.JaxerStore({
  3.        table : 'demo',
  4.        fields : [
  5.            {name : 'name'},
  6.            {name : 'phone'},
  7.            {name : 'email'}
  8.        ],
  9.        readerConfig : {
  10.            sortInfo : {
  11.                sort : 'name',
  12.                dir : 'asc'
  13.            }
  14.        }
  15.    });
  16.  
  17.    // create the Grid
  18.    var grid = new Ext.grid.GridPanel({
  19.        store : store,
  20.        columns : [
  21.            {header : "Name", sortable : true, dataIndex : 'name'},
  22.            {header : "Phone #", sortable : true, dataIndex : 'phone'},
  23.            {header : "Email", sortable : true, dataIndex : 'email'}
  24.        ],
  25.        viewConfig : {
  26.            forceFit : true
  27.        },
  28.        stripeRows : true,
  29.        height : 350,
  30.        width : 680,
  31.        title : 'Jaxer Demo Grid',
  32.        renderTo : Ext.getBody()
  33.    });
  34. });

which would then populate a grid control and render it accordingly.

The source code to this new functionality can be downloaded here.

Posted by Rey Bango at 6:00 am
Comment here

++++-
4.2 rating from 79 votes

Comments Here »

Comments feed TrackBack URI

Leave a comment

You must be logged in to post a comment.