ASP.NET AJAX & ExtJS 4 Grid (1)

In this example series we’ll keep using MSAjaxProxy we set up earlier, for working with IIS 6+ running MS AJAX Extensions 1.0

We’ll set up an ExtJS4 gridpanel with infinite scrolling, using XML data served from ASP.NET. This is a native feature of ExtJS4, but I have not seen a single example from Sencha, explaining how to do this with a real proxy. It is a great feature though, as you can have a 100,000 record data set, with only 50 HTML table rows on the screen at any given time.

ExtJS4 Store & Model configuration is trivial:

// Model
Ext.define('MyOrg.model.SearchResult', {
	extend: 'Ext.data.Model'
	, fields: ['id','name']
});
 
// Store
Ext.create('Ext.data.Store',{
	model: 'MyOrg.model.SearchResult'
	, proxy: Ext.create('MyOrg.proxy.MSAjaxProxy', {
		url: 'Default-UMRA.aspx/Search'
		, reader: { type: 'xml', root: 'matches', record: 'match' }
		, extraParams: { query: 'Param to C#' }
	}) // eo proxy
})


In this post I’ll walk you through setting up an ASP.NET WebMethod that will serve an XML document. The reason we’re using XML is because IIS has restriction of somewhere around 4 MB for maximum size of a JSON data packet that it would produce. While this is configurable, I’m sure there’s a reason for having this restriction out of the box. Unlike with JSON, with XML we’re not restricted on the size of the data packet. This makes it the better option for large data sets.

Sample XML Data Packet:

<?xml version="1.0" encoding="utf-8"?>
<matches>
	<match><id>0</id><name>Number 0</name>
	<match><id>1</id><name>Number 1</name>
	...
</matches>

ASP.NET WebMethod for Default.aspx:

/// <summary>
/// Returns XML  matches/match[id,name]
/// </summary>
/// <param name="query">Search query</param>
[WebMethod(EnableSession = true)]
[ScriptMethod(ResponseFormat=ResponseFormat.Xml,UseHttpGet = false,XmlSerializeString = false)]
public static XmlDocument Search( string query )
{
	XmlDocument doc = new XmlDocument();
	using (XmlWriter writer = doc.CreateNavigator().AppendChild())
	{
		writer.WriteStartDocument();
		writer.WriteStartElement("matches");
 
		for (int i = 0; i < 100; i++)
		{
			writer.WriteStartElement("match");
 
			writer.WriteElementString("id", i);
			writer.WriteElementString("name", "Number " + i);
 
			writer.WriteEndElement(); // eo match
		}
 
		writer.WriteEndElement(); // eo matches
		writer.WriteEndDocument();
	}
 
	return doc;
}
VN:F [1.9.22_1171]
Rating: 5.7/10 (6 votes cast)
ASP.NET AJAX & ExtJS 4 Grid (1), 5.7 out of 10 based on 6 ratings

2 thoughts on “ASP.NET AJAX & ExtJS 4 Grid (1)”

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *