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