Extjs的RowExpander擴充套件，程式碼見

使用示例見：

在資料量大的時候，一次性載入所有資料會佔用伺服器大量時間去執行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 //註冊回撥函式 });