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:



First, let's talk ASP.NET MVC3. Our web service method is rather simple - it takes in "query" as the parameter (whatever the user is typing in) and returns a JSON object, which is just a LinkedList:

// in Global.asax.cs on Application_Start
routes.MapRoute(
	"GroupSearch",
	"Group/Search",
	new { controller = "Group", action = "Search" }
);
 
// in GroupController.cs
/// <summary>
/// Search method that returns JSON like [ { sAMAccountName:..., cn:... }, ... ]
/// </summary>
[HttpPost]
public JsonResult Search( string query )
{
	// Return data
	var ret = new LinkedList<object>();
 
	//...perform your search and store in "results"
	foreach(SearchResult result in results )
	{
		string cn = ...
		string sAMAccountName = ...
		string description = ...
		ret.AddLast( new { // JSON row
			cn = cn,
			sAMAccountName = sAMAccountName,
			description = description 
		});
	}
 
	return Json(ret);
} // eo Search()

The ExtJS side happens to be rather simple too - no custom code; all configuration:

{
	xtype: 'combo',
	width: 300,
	store: Ext.create('Ext.data.Store', {
		fields: [ 'sAMAccountName', 'cn', 'description' ],
		proxy: Ext.create('T4E.proxy.MSAjaxProxy', {
			url: '/Group/Search', reader: { type: 'json' }
		}) // eo proxy
	}), // eo store
	queryMode: 'remote',
	typeAhead: true,
	minChars: 1,
	forceSelection: true,
	allowBlank: false,
	valueField: 'sAMAccountName',
	displayField: 'sAMAccountName',
	tpl: Ext.create('Ext.XTemplate', 
		'<tpl for=".">' +
			'<div class="x-boundlist-item">' +
				'<b>{[Ext.htmlEncode(values.sAMAccountName)]}</b>' +
				'{[values.cn==values.sAMAccountName?"":" ("+Ext.htmlEncode(values.cn)+")"]}' +
				'{[values.description==""?"":"<br/><i>"+Ext.htmlEncode(values.description)+"</i>"]}' +
			'</div>' +
		'</tpl>'
} // eo combo

...note the custom logic inside the rich result window template. Can you believe how easy this is?

VN:F [1.9.22_1171]
Rating: 7.5/10 (8 votes cast)
ExtJS4 Combo & ASP.NET MVC3, 7.5 out of 10 based on 8 ratings
Comments (2) Trackbacks (0)
  1. nice work!

    have you had any luck w a gmail style contact picker combobox?

    keep posting eh, it’s good stuff

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  2. Thanks! I don’t really see how gmail’s contact picker is different than this? Other than it highlights the search query; you’d save to do some trickery to the combo to make that happen. Possibly you could even do that in the XTemplate…

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)

Leave a comment

* Copy This Password *

* Type Or Paste Password Here *

No trackbacks yet.