10 January 2008

Struggling with ExtJS and ASP.Net

I am struggling with ExtJS and ASP.Net 2.0 working together. Today I spent the entire day trying to get a simple grid working. After working most of the day, I finally got it to work. Somehow the joy was gone...hoping to work more with this tool

Following is the methods I used to get a simple unformatted grid up and working.

XML/ASPX
Due to corporate constraints at my current employer, I am forced to use XML and cannot take advantage of the latest JSON technology. That meant that the grid data source has got to be XML.

Exposing XML in ASP.Net is not well documented and not well understood. In fact, I even came across a Jesse Liberty posting asking how to do something similar (I think). (Hat's off to Jesse Liberty - he writes great books - but I have no idea what he is talking about in that post.)

Creating a raw XML page from an ASPX file turns out to not be difficult. Write code to do the following in the Page_Load event:
  • Create a DataSet
  • Connect to the database and fill a table in the dataset via a DataAdapter
  • Create an XmlTextWriter and populate the constructor with the Response.OutputStream and Encoding.UTF8 arguments
  • Call the XmlTextWriter.WriteStartDocument() method
  • Use the data table.WriteXML method, using the XMLTextWriter as the single argument
  • Call the XmlTextWriter.WriteEndDocument() method
The markup also requires two tasks:
  • Clear the page of all markup except for the page directive at the top
  • Add the ContentType attribute to the directive, specifying "text/xml"
The above was done for testing purposes. I think the recommended method for exposing XML is via a Web Service. ExtJS's data reader will (theoretically) read almost XML source. I can definitely vouch that they use a complex XML example on their website for consuming XML.

ExtJS Sample code
The JavaScript code in the example leaves a lot to be desired. You want to look at the one here. The difference is that the second example uses the Ext.data.HttpProxy object. This turns out to be a non-trivial difference. Your code will not be able to read the data without it.

Finally, do yourself a favor and create a record object to pass the data when using the reader to read the data structure. I'm not sure what they are doing in the example - but hopefully I'll learn. Creating a record object will make your life easier.