Extjs-RowExpander 的异步调用

RowExpander是Extjs 中grid的一个插件，可以在一行下再展现数据。实现了非常方便的parent-detail的效果。

1.加入mousedown事件处理

 

 

Js代码

1. if  (Ext.ux.grid.RowExpander) {   
2.     Ext.apply(Ext.ux.grid.RowExpander.prototype, {   
3.      getDataFn :  null ,   
4.      onMouseDown :  function (e, t) {   
5.   
6.        if  (t.className ==  'x-grid3-row-expander' ) {   
7.        e.stopEvent();   
8.         var  row = e.getTarget( '.x-grid3-row' );   
9.         var  viewRow = row;   
10.         if  ( typeof  viewRow ==  'number' ) {   
11.         viewRow =  this .grid.view.getRow(viewRow);   
12.        }   
13.         var  record =  this .grid.store   
14.          .getAt(viewRow.rowIndex);   
15.         if  (!record.data.checkSignerInvoicess) {   
16.   
17.          var  mark=  new  Ext.LoadMask(Ext.getBody(), {   
18.          msg :  'Loading data...' ,   
19.          removeMask :  true   
20.         });   
21.         mk.show();   
22.          this .getDataFn (record,  this ,   
23.            function (expander) {   
24.             // 展开该行   
25.           expander.toggleRow(viewRow.rowIndex);   
26.           mark.hide();   
27.          });   
28.   
29.          return ;   
30.        }   
31.         this .toggleRow(row);   
32.       }   
33.      }   
34.     });   
35.    }  

 2.制作获取数据函数

 

 

Js代码 

1. function  GetInvoices(record, expander, callback) {   
2.     Ext.Ajax.request( {   
3.      url :  'getDetailInvoices.json' ,   
4.      params : {   
5.        'chkNo'  : record.data.chkNo,   
6.        'vendorNo'  : record.data.vendNo   
7.      },   
8.      success :  function (response) {   
9.        var  data = Ext.decode(response.responseText);   
10.        if  (!data.success) {   
11.        showError(data.message, checkBooks);   
12.         return   true ;   
13.       }   
14.        // 设置模板中所需要的record数据，并展开该行   
15.      record.data.checkSignerInvoicess = data.records;   
16.      record.commit();   
17.   
18.       if  (callback) {   
19.       callback(expander); // 一定要回调该函数，否则不能展开   
20.     }   
21.    },   
22.    failure :  function () {   
23.      if  (callback) {   
24.      callback(expander);   
25.     }   
26.    }   
27.     })   
28.    }   
29.    ;  

 3.制作expander

 

 

Js代码

1. var  expander =  new  Ext.ux.grid.RowExpander(   
2.      {   
3.   
4.       tpl :  new  Ext.XTemplate(   
5.   
6.          '<div class="x-grid-group-title" style="margin-left:10%">' ,   
7.          '<table class="x-grid3-row-table" cellspacing="0" cellpadding="0" border="0" >' ,   
8.          '<thead>' ,   
9.          ' <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>' ,   
10.          '</thead>' ,   
11.   
12.          '<tpl for="checkSignerInvoicess">' ,   
13.          '<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>' ,   
14.          '</tpl>' ,  '</table>' ,  '</div>' ),   
15.       lazyRender :  true ,   
16.       getDataFn : GetInvoices   
17.       // 注册回调函数   
18.      });  

 4.使用expand

 

 

Java代码

1. //column中   
2. var columns =  new  Ext.grid.ColumnModel( [   
3.       new  Ext.grid.RowNumberer(), sm, expander, {   
4.   
5. //grid中   
6. var grid =  new  Ext.grid.GridPanel( {   
7.     title :  'Payment Information' ,   
8.     renderTo :  'my-tabs' ,   
9.     store : initalStore,   
10.     cm : columns,   
11.     sm : sm,   
12.     plugins : expander,