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.效果