What Is ExtJS ExtJS 4+ Extensions Examples Tutorials

9Apr/122

ExtJS4 Combo & ASP.NET MVC3

First see basic ExtJS4 & ASP.NET MVC3 setup tutorial

In this example I will demonstrate just how easy it is to implement a type-ahead dropdown that will ping the server over AJAX every time a user types something in, and show a list of results with rich markup. It's amazing just how easy it is to do this with ASP.NET MVC3 and ExtJS4 data stores.

The end result looks something like this:

VN:F [1.9.22_1171]
Rating: 7.5/10 (8 votes cast)
2Apr/120

ExtJS4 & ASP.NET MVC3 Dictionary

See my previous example on getting ExtJS4 working with ASP.NET MVC3

Back when I used to work with ASP.NET AJAX Extensions 1.0 (5 year old tech), I used to do the following all the time:

JavaScript

Ext.Ajax.request({
	url: ...
	, jsonData: { data: form.getForm().getValues() }
	...
}); // eo Ajax

ASP.NET AJAX Extensions 1.0

[WebMethod(EnableSession = true)]
public static void MyWebMethod( Dictionary<string,object> data )
{
	...
}

...ASP.NET AJAX Extensions 1.0 handled the conversion of data from JSON to C# Dictionary, which is a pleasure to work with. To my great disappointment, I discovered that ASP.NET MVC3, the latest and greatest, won't do that for you! I had to find a solution...

VN:F [1.9.22_1171]
Rating: 9.1/10 (7 votes cast)
12Mar/120

ASP.NET MVC3 XML & ExtJS4

In this example I will demonstrate how to use an ExtJS4 store to perform an XML data read from an ASP.NET MVC3 controller. First let me say that I wasted a LOT of time reading fake tutorials on these keywords - seems there are a lot of people who can explain the ASP.NET MVC3 side, but not how to actually connect it to an ExtJS4 store using a clean proxy, AND pass parameters to the server. Especially using XML for the return data.

So, let's say we just want a basic search box - when user types something in and hits Search, we will use an ExtJS4 store and POST to an ASP.NET MVC3 method, passing the search query as a JSON parameter, while returning results in XML. Here's the basic ExtJS model & store configuration:

// Basic model
Ext.define('MY.model.SearchResult', {
	extend: 'Ext.data.Model',
	fields: ['id','html']
});
 
// Basic store
Ext.create('Ext.data.Store',{
	model: 'MY.model.SearchResult',
	proxy: Ext.create('MY.proxy.MSAjaxProxy', {
		url: '/User/Search',
		reader: { type: 'xml', root: 'matches', record: 'match' }
	}) // eo proxy
}) // eo store
VN:F [1.9.22_1171]
Rating: 7.6/10 (8 votes cast)
10Dec/112

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
}
VN:F [1.9.22_1171]
Rating: 7.5/10 (8 votes cast)
9Dec/110

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

VN:F [1.9.22_1171]
Rating: 8.9/10 (8 votes cast)