Introduction

In September 2010, I landed on a job in a major tech company, since then I have been using extensively and exclusively Ext. Before that, I have never even heard of Ext and I have had a lot of fun exploring jQuery. I bet a lot of people still do not know (much) about Ext, like me back then.

You should not have a pang of guilt though. The world of web is always a-a-changing, the garden of JavaScript has been expanding, with libraries of all sorts springing up every day, though only some of them are flourishing and staying into major contenders. jQuery is the widely popular one, enjoying a thriving community and ever-growing list of plug-ins contributed by enthused developers; Ext has a much low profile and is exclusively developed and owned by Sencha.

JQuery vs Ext Js

The billing

To say the obvious, they are billed differently. jQuery is marketed as The write less, do more JavaScript library; Ext Js is branded as A cross-browser rich internet application framework. You know from the start, Ext Js took themselves more seriously, not to mention it does not offer free license for commercial use.

Ease of use

I have to say, jQuery is much, much more intuitive, because the way it turns the familiar css conventions into simple yet powerful selectors. If you know JavaScript and css, you will be able to pick up jQuery in no time. On the other hand, Ext is a full-blown framework, it tastes more like a heavy-handed programming language than scripts, quite some of syntax feels like directly culled from c/c#/java. It employs all of the object-oriented methodology. It has a lot of built in templates and controls. It is a beast that is hard to warm up to (for me), but once you have a hang with it, it would be your powerful beast.

Performance, robustness and scalability

Sencha and my colleagues claim Ext has better performance. From my research, it seems to be inconclusive. But I do think Ext wins on the side of robustness and scalability.

So which one wins?

I have been using Ext Js for half an year; I cannot say I am fully converted.

I still miss JQuery, I mean, I miss the jQuery community. Whenever I typed a question about jQuery, google always happily churning up a long list solutions even better-phrased questions, but with Ext Js, my only hope lies with my colleagues and dive down into the Ext API documentation (which is comprehensive however highly geeky); On the other hand, Ext does have a awesome set of utilities and templates and solid object-oriented core for you to inherit, encapsulate or whatever to your heart's content, which is good for applications meant for complex and continuously evolving situations.

My imaginary warfare between jQery and Ext Js is like that of Mac and PC. Ext Js smacks of more the elite, geeky flavor of Mac, but jQuery is like PC, maybe a little clumsy, but widely popular, still rules the day.

Scratch the surface of Ext Js

First and foremost, you should know, every quest about Ext probably will begin and end in the Ext Js API (http://dev.sencha.com/deploy/ext-4.0.0/docs/). By the way, the Ext Api documentation itself is developed with Ext Js and show-cases the power and agility of the framework.

Ext Ready?

In jQuery, the single most important event in the document ready event and the one piece of code that you must know is

Likewise, in Ext, only when the dom is ready the ball starts rolling.

The Ext Element

The Ext way of manipulating HTML element is to wrap it in then dress it up then arm it with all sorts of utilities, to make a Ext.Element. And Ext element is so dear and essential to Ext, it is called the "heart of Ext Js".

The way to get an element is Ext.get() or Ext.fly().

Let's say you have a div.

You can get it like this:

or

After that, you can start working on your element.

Ext.xTemplate

We all hate we have to spit out the same code over and over again, however computer is always good at repetitions, all we need is some sensible instructions or a good Ext XTemplate, like this:

Listing 1: A sample Ext.XTemplate

Ajax comes into play

Behind all of the ever-more-exciting JavaScript libraries, it is really AJAX that makes them so exciting and sexy. No wonder jQuery has a great many ways to AJAX, from the very simple ones, get/post to the very comprehensive and fully configuarable one like ajax.load. You can google out a zillion of posts of how to do jQuery Ajax.

Ext has a lot too. Moreover, Ext has a class to manage the data Ext.Data.Store, with two subslasses: JsonStore, SimpleStore. SimpleStore is meant to manage data that is simple and local, for example, array. A typical use of it is a Ext native combo box, as the following

Listing 2: A dummy Ext ComboBox

On a side note, Ext combobox is one of cool ext controls that supports autocomplete, remote-loading, paging and many other features.

Quite often, you probably will find that a combobox (or most other controls) with dynamic data is much more needed, so you would employ Ext JsonStore and call it like the following:

Ext.Grid

Any web is about successful presentation of data, grid is forever one of most requested presentation form, and all major languages and scripts strive to provide the most robust, powerful, appealing grid that is capable of doing great many things, including editing, search, paging, sorting, expanding, collapsing . So does the gridview of ASP .net. So does the Ext GridPanel.

Ext gridPanel really rocks. And go to Sencha website, they can never demo enough grid for you. Steal a couple of screenshots here:

For a grid like that you actually do not need to sweat too much. We will have a dummy example later to illustrate this point.

Moreover, other than the "traditional" Ext GridPanel, there is one even more amazing Ext Grid: livegrid. Ext.ux.Livegrid is an ExtJS user extension that connects to a database backend and renders large sets of data into a grid, without the need of paging. It dynamically fetches next batch of data rows as you scroll. Server requests for pre-buffering data are only invoked when needed - your application will be able to virtually render thousands of rows of data at one time, and users can browse through this data without performance loss.

You may check out the Ext livegrid at http://www.ext-livegrid.com/.

The driving force of ASP .NET

Once upon a time, ASP .net wants to be the king that rules the front end (the client-side UI presentation) and the backend (the server-side data, the business logic ...,), the easy, complex and complicated. Now, at least for me, ASP .net pretty much is only in charge of the backend, harness the limitless computing powers and ever-evolving frameworks on the server side, fetching, manipulating and marshalling data to the client.

That is what we do here, created a data layer to set up the data, then use a handler to bridge the data and ui.

Let's run down the data set up quickly.

Listing 3: Data classes

A generic class with a total property that gives the size of the recordset and the dynamic class that will hold the real data. This is required by the Ext Js Gridpanel, so the resulting JSON object will have 2 pieces of necessary information: total and the actual data.

A business logic class that prepare the data. Here we just use a dummy service to cook up some fake employees.

The super important glue (the handler) that provides just the right stuff (JSON object).

The standard handler method ProcessRequest has only three crucial lines of code.

First, context.Response.ContentType = "application/json"; set the response content type to be json; second, call a JavaScriptSerializer to work; third, ask the serializer to serialize our data into objects that can be digested by EXT Js. It is like saying: hey, I want it to be in Chinese; Get me a Chinese translator; Translate it now so I can understand, duh!

You can check out the JSON data returned from the httphandler using firebug.

Finally, an Ext JS Grid Panel

Finally, let's set up a super dummy Ext Js Grid panel!

It is always satisfying to be able to set up something, even a dummy grid. With Ext Js Grid, all you need to do is just configure a few things: The data store, the column model, title, sort, etc., as the following:

With the set up, you get the following Ext Grid:

Summary

So in this article, we have had a glimpse of Ext Js, the cross-browser JavaScript framework developed from Sensha, and how we can glue this framework on top of ASP .net. Hope you enjoy it, and give Ext Js a try if you have not.

About Xun Ding

Web developer, Data Analyst, GIS Programmer This author has published 12 articles on DotNetSlackers. View other articles or the complete profile here.