Extjs RowExpander的扩展，支持异步加载

Extjs的RowExpander扩展，代码见

http://code.google.com/p/gwt-ext-ux/source/browse/trunk/main/src/com/gwtextux/public/js/rowexpander/Ext.ux.grid.RowExpander.js?spec=svn245&r=245

 

使用示例见：

http://extjs.com/deploy/dev/examples/grid/grid3.html

 

在数据量大的时候，一次性加载所有数据会占用服务器大量时间去执行I/O操作，降低了服务器的服务率。所以异步加载可以分散请求的压力， 对Ext.grid.RowExpander扩展如下：

var AsyncRowExpander = Ext.extend(Ext.grid.RowExpander, { requestFn : null, onMouseDown : function(e, t) { if(t.className == 'x-grid3-row-expander'){ e.stopEvent(); var row = e.getTarget('.x-grid3-row'); var viewRow = row; if(typeof viewRow == 'number'){ viewRow = this.grid.view.getRow(viewRow); } var record = this.grid.store.getAt(viewRow.rowIndex); //如果该行处于collapse状态，并且要扩展显式的数据尚未加载，则调用requestFn来加载数据 if (!this.state[record.id]) { if (record.data.newValue == '' && record.data.oldValue == '') { var mk = new Ext.LoadMask(Ext.getBody(), { msg: '正在读取数据，请稍候...', removeMask: true }); mk.show(); this.requestFn(record, this, function(expander) { //展开该行 expander.toggleRow(row); mk.hide(); } ); return; } } this.toggleRow(row); } } });

使用示例如下：

var GetModifyDetail = function(record, expander, callback) { Ext.Ajax.request({ url : 'getDetailHistoryModify.action', params : { 'objectkey' : record.data.modifyKey, 'fieldName' : record.data.fieldName, 'modifyDate': record.data.modifyDate }, success : function(response) { var obj = eval('(' + response.responseText + ')'); //设置模板中所需要的record数据，并展开该行 record.data.oldValue = modify.oldValue; record.data.newValue = modify.newValue; if (callback) { callback(expander);//一定要回调该函数，否则不能展开 } }, failure : function() { if (callback) { callback(expander); } } }); } // row expander var expander = new Atmmpp.UI.RowExpander({ tpl : new Ext.Template( '<p><b><font color=blue>原始值:</font></b><br> {oldValue}</p><br>', '<p><b><font color=blue>变更值:</font></b><br> {newValue}</p>' ), lazyRender: true, requestFn: Atmmpp.ModifyHistory.GetModifyDetail //注册回调函数 });