December, 2011 | What Is ExtJS

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)

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' }
    ]
});
...

Continue reading Fieldset /w Dynamic Controls (7)

Rating: 5.8/10 (6 votes cast)