Learn ExtJS AJAX: Defining data grid properties at run time

January 31, 2008 17:00 by Jorge

I've recently been trying the impressive ExtJS javascript library. While looking into how our products can benefit from ExtJS's features, one of the challenges I found is the fact that some of our ExtJS grids are dynamic in the sense that the properties of their columns - number of columns, data types, formatting, etc. - are only known at run time.

In this post I will demonstrate one of the approaches you can take for sending the column models for the grids, as well as the field definitions for their data stores, from the server-side code.

For any page containing one or more data grids, the approach is a two-step process. I first use an AJAX request to download the column models for the grids and fields definitions for their data stores. Once the request is complete, I proceed to set up the grids and download their data.

 

 

Although my server code is written in C#, the approach is valid for any other languages or technologies you might use. On the client side I just sort the calls so I get the settings for the grid and data store before getting the actual data.

The first request gets to the server and is routed to the GetGridSettings function:

 

   1:  private string GetGridSettings()
   2:      {
   3:   
   4:          StringBuilder sb = new StringBuilder();
   5:   
   6:          // Grid name
   7:          sb.Append("[['myGrid'],[");
   8:          // Grid columns
   9:          sb.Append("{id:'firstname',header: 'First Name', width: 200, sortable: true, dataIndex: 'first_name'},");
  10:          sb.Append("{id: 'lastname', header: 'Last Name', width: 200, sortable: true, dataIndex: 'last_name'},");
  11:          sb.Append("{header: 'Email Address', width: 200, sortable: true, dataIndex: 'email_address'}");
  12:          sb.Append("],");
  13:          // Data Store fields
  14:          sb.Append("[{name: 'first_name'},{name: 'last_name'},{name:'email_address'}]");        
  15:          sb.Append("]");
  16:   
  17:          return sb.ToString();
  18:      }


GetGridSettings is where you build your column model and data store fields. From here you can call into any containers you are using to keep your columns information.

The second request gets routed to GetGridData, which simply retrieves the data for the grid:

 

   1:      private string GetGridData()
   2:      {
   3:          StringBuilder sb = new StringBuilder();
   4:          int rowCount = 50;
   5:          
   6:          sb.Append("{rCnt:" + rowCount.ToString() + ",rows:[");
   7:   
   8:          for (int i = 0; i < rowCount; i++)
   9:          {
  10:              sb.Append("{'first_name':'John','last_name':'Doe" + i.ToString() + "','email_address':'JohnDoe" + i.ToString() + "@gmail.com'},");
  11:          }
  12:   
  13:          sb.Append("]}");
  14:   
  15:          return sb.Replace(",]}","]}").ToString();   // Remove the extra comma before sending the data.
  16:      }

 

And that's all for the server-side code. 

Download Visual Studio project with functioning sample code: DynamicGrid.rar (528.43 kb)

Update: I just learned there's a user extension to the ExtJS GridPanel that greatly helps address the challenge I talk about in the article.

 

Actions: E-mail | Permalink | Comments (4) | Trackback

Related posts


Comments


Chas

February 2, 2008 19:40

Hey,
Any thoughts on my current challenge?: Using ExtJS, I need to build a hierarchical grid (grouped by object type) where each group has different fields. For example, I need grouping thus: Object:Fruit Fields: {Color, Size, Density}, Object:Animal Insect:{NumLegs, CanFly, Stings}, Object:Automobile Fields:{Manufacturer,
Make, Model, Year} - - - these objects (or their fields) will not be known until runtime. Been searching the ExtJS site and have not yet seen any clues. Thanks, Chas


Jorge

February 7, 2008 18:18

Can you send me a picture showing how you'd like your grid to look?


VK

March 19, 2008 16:16

Jorge, Does your sample application include everything that is needed to run? I'd like to see a working sample of the grid you've created, but can't get the website to compile. Thanks..


Jorge

April 17, 2008 18:40

VK,

yes, the sample is self-contained. I wrote it with VS2008 Express. Framework 3.5

Add comment


 

  Country flag

[b][/b] - [i][/i] - [u][/u]- [quote][/quote]



Live preview



May 17, 2008 10:27