AJAX | What Is ExtJS

ASP.NET AJAX & ExtJS 4 Grid (3)

In this example, we’ll be returning additional data to our ExtJS4 data store, which is passed from ASP.NET over AJAX in XML format. It’s common to show grid row count in the form title, as well as something else in the header, such as final SQL or LDAP query used by your ASP.NET AJAX script (WebMethod).

Combine this with ExtJS4 buffered grid’s ability to only render 50 HTML rows with infinite scrolling, this makes the stock ExtJS4 gridpanel an extremely powerful application in its own right, very good at running large data queries. On a decent computer with decent Internet connection this will smoke the traditional buffered grid, which ajax back on every scroll.

Continue reading ASP.NET AJAX & ExtJS 4 Grid (3)

Rating: 8.3/10 (6 votes cast)

ASP.NET AJAX & ExtJS 4 Grid (2)

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

In this example we’ll set up an ExtJS4 gridpanel with infinite scrolling, using XML data served from ASP.NET. Sometimes this is also called “buffered grid.” Sencha provides an example using memory store, but it took me some time to figure this one out, so enjoy!

Continue reading ASP.NET AJAX & ExtJS 4 Grid (2)

Rating: 6.4/10 (5 votes cast)

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
})

Continue reading ASP.NET AJAX & ExtJS 4 Grid (1)

Rating: 5.7/10 (6 votes cast)

ASP.NET AJAX & ExtJS 4 in 2-way JSON (2)

In this example we will use what we learned to build a “MSAjaxProxy” – just like a normal AjaxProxy, except geared towards IIS 6+ running MS AJAX Extensions 1.0. Proxies are used by all ExtJS stores (combos, grids, trees, etc.), so we would be able to do something like this:

{
	xtype: 'combo'
	, displayField: 'attrName'
	, valueField: 'attrID'
	, store:
	{
		fields: ['attrID','attrName']
		, proxy: Ext.create('MyOrg.proxy.MSAjaxProxy', {
			url: 'Default-UMRA.aspx/Test'
			, reader: { type: 'json' }
		}) // eo proxy
	} // eo store
}

Continue reading ASP.NET AJAX & ExtJS 4 in 2-way JSON (2)

Rating: 7.5/10 (8 votes cast)

ASP.NET AJAX & ExtJS 4 in 2-way JSON (1)

In this example series I will show you something that might save you some headache – using ExtJS 4 AJAX controls with IIS 6+ running MS AJAX Extensions 1.0. We will need to make a custom proxy for use in stores, which are utilized throughout ExtJS4, i.e. in a combo:

Data will travel back and forth between our server-side C# code and client-side ExtJS 4 in efficient JSON packets, such as: {param:’test’}
Continue reading ASP.NET AJAX & ExtJS 4 in 2-way JSON (1)

Rating: 8.9/10 (8 votes cast)