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,