Store | What Is ExtJS

ExtJS 4.1 Data Store Sorting

ExtJS 4+ data stores allow you to sort data rather easily through either a “sorters” configuration on the store itself, or through the store “sort” method. Only one problem: all sorting is case-sensitive. Here’s a quick example of how you can customize the sorter to be case-insensitive, in a context of a combo box:

{
	xtype: 'combo',
	fieldLabel: 'Supervisor',
	name: 'manager',
	queryMode: 'remote',
	store: Ext.create('Ext.data.Store', {
		fields: ['displayName', 'distinguishedName'],
		proxy: Ext.create('T4E.proxy.MSAjaxProxy', {
			url: '/User/SearchManager', reader: { type: 'json' }
		}), // eo proxy
		sorters: [{ 
			property: 'displayName'
			, transform: function(val) { 
				return val.toLowerCase(); 
			} 
		}] // eo sorters
	}), // eo store
	displayField: 'displayName',
	valueField: 'distinguishedName',
	forceSelection: true,
	typeAhead: true,
	minChars: 1
}

Rating: 8.4/10 (14 votes cast)

ASP.NET MVC3 & ExtJS4 Errors

In my previous post I presented an example of a basic ASP.NET MVC3 controller connecting to an ExtJS4 data store and passing some data in XML format via store’s load method.

So far I’ve run into just one issue with this setup – clean error handling. By default, ASP.NET MVC will spit out any exceptions in clear text (with <html> tags and everything), which is not very useful when building a quality web application. Here’s what I want on my errors:

Continue reading ASP.NET MVC3 & ExtJS4 Errors

Rating: 9.4/10 (7 votes cast)

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

Continue reading ASP.NET MVC3 XML & ExtJS4

Rating: 6.9/10 (9 votes cast)

ASP.NET AJAX & ExtJS 4 Grid (4)

Read Previous Example First!

In this example, we’ll improve our ExtJS 4 model to include an “association” that it will read from XML produced by AJAX call to ASP.NET. Most common association is one to many, for example: your Client can place multiple Orders. An ExtJS 4 data store and model can accommodate this.

The new XML data packet will look like this; notice hiddenAttributes:

&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;matches&gt;
	&lt;match&gt;
		&lt;id&gt;0&lt;/id&gt;
		&lt;name&gt;Number 0&lt;/name&gt;
		&lt;hiddenAttributes&gt;
			&lt;attr&gt;
				&lt;name&gt;hidden1&lt;/name&gt;
				&lt;value&gt;val1&lt;/value&gt;
			&lt;/attr&gt;
			&lt;attr&gt;
				&lt;name&gt;hidden2&lt;/name&gt;
				&lt;value&gt;val2&lt;/value&gt;
			&lt;/attr&gt;
		&lt;/hiddenAttributes&gt;
	&lt;/match&gt;
	&lt;match&gt;&lt;id&gt;1&lt;/id&gt;&lt;name&gt;Number 1&lt;/name&gt;&lt;/match&gt;
	...
&lt;/matches&gt;

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

Rating: 6.8/10 (5 votes cast)

ASP.NET AJAX & ExtJS 4 Grid (3)

Read Previous Example First!

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)