Extjs-RowExpander 的异步调用
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"><tdclass="x-grid3-hd x-grid3-cell x-grid3-td-11" >seqNo</td> <tdclass="x-grid3-hd x-grid3-cell x-grid3-td-11" >status</td> <tdclass="x-grid3-hd x-grid3-cell x-grid3-td-11" >amt</td> <tdclass="x-grid3-hd x-grid3-cell x-grid3-td-11" >discAmt</td> <tdclass="x-grid3-hd x-grid3-cell x-grid3-td-11" >payAmt</td> <tdclass="x-grid3-hd x-grid3-cell x-grid3-td-11" >vendNo</td> <tdclass="x-grid3-hd x-grid3-cell x-grid3-td-11" >cashAcctCurrCd</td> <tdclass="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.效果
http://dl.iteye.com/upload/attachment/184091/aef396a9-d0b1-3ce0-99bd-21bc25092913.jpg
页:
[1]