What Is ExtJS ExtJS 4+ Extensions Examples Tutorials

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)
7Dec/110

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.

VN:F [1.9.22_1171]
Rating: 6.7/10 (9 votes cast)
6Dec/110

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

Fieldset /w Dynamic Controls (7)

Implement MVC

In this example we'll split up our code using ExtJS 4 MVC (Model View Controller) framework. De-coupling our models, views, and controllers makes the code very easy to modify later. This will come in handy when we have to add various input types later. Also, we will now be able to clone our fieldset with very little code:


...with this little code:

JS

...
// Create 2 fieldsets
Ext.create('Ext.container.Container',{
    renderTo: Ext.getBody()
    , defaults: { 
        xtype: 'mc_fieldsetdynamiccontrols'
        , margin: 10 
    }
    , items: [
        { title: 'Search Filter 1' }
        , { title: 'Search Filter 2' }
    ]
});
...
VN:F [1.9.22_1171]
Rating: 5.8/10 (6 votes cast)
Page 3 of 41234