ExtJS 2.0 - Making Web applications more responsive with minimal network traffic!

It has been quite long that I have been working on engineering responsive web applications using Microsoft ASP.NET and related technologies.

Although the use of Update Panel can do the wonders to make a traditional ASP.NET Application a bit more responsive but I have always been eager to make the application responsive with minimal network traffic and that’s not the case when we use the ASP.NET AJAX Update Panel.

So I personally prefer the Client Centric Programming Model of ASP.NET AJAX (the PageMethods approach) in which you only transfer the required data and not the complete UI. And in this case when you transfer just the required data and not the complete UI, you are stuck on how to present the data in a good enough fashion. For that you need the command on Java Script + HTML DOM, but even when you have command on all this JavaScript + CSS stuff, making a “GridView” kind of thing to show the data using Java Script is hell of a task.

This is where ExtJS comes in, to serve the purpose. ExtJS is basically a JavaScript based UI framework and provides sufficient enough controls through which you can fulfill the data presentation needs of your applications.

The ExtJS controls range from HTML Control extenders (text, button, text area, select list) to a full fledged grid controls (with built-in client side sorting, column reordering, column hide/show, grouping, inline editing, deletion and what not) which can be 2 way-binded to multiple kinds of data sources (JSON, Arrays, XML etc), and quite amazingly all this is done in JavaScript.

A quick walkthrough on how to bind the data returned from server to an ExtJS based Grid is outlined below.

1. Get the data from the server (like getting a list of Employee type of objects i.e. List) using the ASP.NET AJAX Page Methods.


2. Define the ExtJS based “Record” that maps the Employee type of C# Class objects to an ExtJS based employee “Record” type.


3. Define the ExtJS based “JsonReader” and associate that reader with the employee “Record” type you have just defined in Ext JS.


4. Define the ExtJS based “Store” and load the returned List in that store using the reader you have already defined.


5. Now you can bind this ExtJS based “Store” to any ExtJS based “GridPanel” or Select list or can use the store as a temporary data place holder for further manipulation later on.

The tricky part is to read the returned List of Employees in “JsonReader” and load it in “Store”, once the data is loaded in the Store, you can bind it to any data bound ExtJS control or can manipulate it later on.

On request of one of the readers; Imtiaz, here is the sample code of the above walkthough. [Added: 14/12/2007]

The code sample is updated to incorporate JavaScript IntelliSense for ExtJS in Visual Studio 2008 SP1 and is available here. [Added: 17/08/2008]

ExtJS is compatible with all the modern browsers, and can be used for free under open source license or under a commercial copy-left license. For more details on licensing, refer to the ExtJS website. i.e. http://www.extjs.com/

A few sample UIs (snapshots of ExtJS examples) made with the ExtJS UI Framework are shown below to give you an idea of what we can get out of ExtJS.