Extjs学习总结---RowExpander 的异步调用

erichua

RowExpander是Extjs中grid的一个插件，可以在一行下再展现数据。实现了非常方便的parent-detail的效果。
1.加入mousedown事件处理
if (Ext.ux.grid.RowExpander) {Ext.apply(Ext.ux.grid.RowExpander.prototype, {getDataFn : 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);if (!record.data.checkSignerInvoicess) {var mark= new Ext.LoadMask(Ext.getBody(), {msg : 'Loading data...',removeMask : true});mk.show();this.getDataFn (record, this,function(expander) {// 展开该行expander.toggleRow(viewRow.rowIndex);mark.hide();});return;}this.toggleRow(row);}}});} 2.制作获取数据函数
function GetInvoices(record, expander, callback) {Ext.Ajax.request( {url : 'getDetailInvoices.json',params : {'chkNo' : record.data.chkNo,'vendorNo' : record.data.vendNo},success : function(response) {var data = Ext.decode(response.responseText);if (!data.success) {showError(data.message, checkBooks);return true;}// 设置模板中所需要的record数据，并展开该行record.data.checkSignerInvoicess = data.records;record.commit();if (callback) {callback(expander);// 一定要回调该函数，否则不能展开}},failure : function() {if (callback) {callback(expander);}}})}; 3.制作expander
var expander = new Ext.ux.grid.RowExpander({tpl : new Ext.XTemplate('<div class="x-grid-group-title" style="margin-left:10%">','<table class="x-grid3-row-table" cellspacing="0" cellpadding="0" border="0" >','<thead>',' <tr class="x-grid3-hd-row"><td  class="x-grid3-hd x-grid3-cell x-grid3-td-11" >seqNo</td><td  class="x-grid3-hd x-grid3-cell x-grid3-td-11" >status</td><td  class="x-grid3-hd x-grid3-cell x-grid3-td-11" >amt</td><td  class="x-grid3-hd x-grid3-cell x-grid3-td-11" >discAmt</td><td  class="x-grid3-hd x-grid3-cell x-grid3-td-11" >payAmt</td><td  class="x-grid3-hd x-grid3-cell x-grid3-td-11" >vendNo</td><td  class="x-grid3-hd x-grid3-cell x-grid3-td-11" >cashAcctCurrCd</td><td  class="x-grid3-hd x-grid3-cell x-grid3-td-11" >altVendNo</td> </tr>','</thead>','<tpl for="checkSignerInvoicess">','<tr><td>{seqNo}</td><td>{status}</td><td>{amt}</td><td>{discAmt}</td><td>{payAmt}</td><td>{vendNo}</td><td>{cashAcctCurrCd}</td><td>{altVendNo}</td></tr>','</tpl>', '</table>', '</div>'),lazyRender : true,getDataFn : GetInvoices// 注册回调函数}); 4.使用expand
//column中var columns = new Ext.grid.ColumnModel( [new Ext.grid.RowNumberer(), sm, expander, {//grid中var grid = new Ext.grid.GridPanel( {title : 'Payment Information',renderTo : 'my-tabs',store : initalStore,cm : columns,sm : sm,plugins : expander, 5.效果
<img alt="">