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.
A quick walkthrough on how to bind the data returned from server to an ExtJS based Grid is outlined below.
- 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.
- Define the ExtJS based “Record” that maps the Employee type of C# Class objects to an ExtJS based employee “Record” type.
- Define the ExtJS based “JsonReader” and associate that reader with the employee “Record” type you have just defined in Ext JS.
- Define the ExtJS based “Store” and load the returned List
in that store using the reader you have already defined.
- 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]
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.