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!
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 }) |
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.
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:
... // 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' } ] }); ... |
In this example we’ll add a drop-down menu to the [+] button and set up a simple combo box with a store:
