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 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 } |
