What Is ExtJS ExtJS 4+ Extensions Examples Tutorials

13Dec/110

ASP.NET AJAX & ExtJS 4 Grid (2)

In this example series we'll keep using MSAjaxProxy we set up earlier, for working with IIS 6+ running MS AJAX Extensions 1.0

In this example we'll set up an ExtJS4 gridpanel with infinite scrolling, using XML data served from ASP.NET. Sometimes this is also called "buffered grid." Sencha provides an example using memory store, but it took me some time to figure this one out, so enjoy!

VN:F [1.9.22_1171]
Rating: 7.8/10 (4 votes cast)
11Dec/111

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
})
VN:F [1.9.22_1171]
Rating: 5.7/10 (6 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)
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)
3Dec/110

Fieldset /w Dynamic Controls (6)

Adding drop-down menu for the [+] "Add" button

In this example we'll add a drop-down menu to the [+] button and set up a simple combo box with a store:



VN:F [1.9.22_1171]
Rating: 6.0/10 (4 votes cast)
Page 2 of 212