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?
ExtJS4 Combo & ASP.NET MVC3,
nice work!
have you had any luck w a gmail style contact picker combobox?
keep posting eh, it’s good stuff
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…