Extjs-RowExpander 的异步调用

Fangrn

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