What Is ExtJS ExtJS 4+ Extensions Examples Tutorials

20Mar/124

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:

VN:F [1.9.22_1171]
Rating: 9.4/10 (7 votes cast)
12Mar/120

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
VN:F [1.9.22_1171]
Rating: 7.6/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 2 of 212