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 expandervar 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 //注册回调函数});