ExtJS | What Is ExtJS

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)

Fieldset /w Dynamic Controls (9)

Leveraging ExtJS4 Store

In this example we will expand on our already-functional fieldset extension by adding an extra column to the store – “config”. This is an excellent example of the flexibility that ExtJS 4 MVC (Model View Controller) architecture allows.

Continue reading Fieldset /w Dynamic Controls (9)

Rating: 6.7/10 (9 votes cast)

Fieldset /w Dynamic Controls (8)

Complete MVC Controller

In this example we will complete our ExtJS 4 MVC extension by implementing the controller. The outcome is a fully-functional fieldset with dynamic control inputs:

…and our inputs are easy to provide via JSON data:

// Possible inputs
Ext.namespace('MyCompany.globals.FieldsetDynamicControls');
MyCompany.globals.FieldsetDynamicControls.possibleValues = [
    { label: 'Display Name', name: 'displayName' }
    , { label: 'First Name', name: 'givenName' }
    , { label: 'Middle Name', name: 'initials' }
    , { label: 'Last Name', name: 'sn' }
];

Continue reading Fieldset /w Dynamic Controls (8)

Rating: 6.3/10 (8 votes cast)