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,  

 5.效果

 

• 查看图片附件