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