將rowIndex傳遞給extjs中的窗口4

Question

我在窗口中有商店，網格，窗口和幾個文本框。我需要的是，單擊網格中的動作列時，我需要獲取單擊行的rowIndex並將其作爲參數傳遞給窗口。在那裏，我需要加載商店並獲取值並將其設置在適當的文本框中。我不知道如何通過單擊將網格中的rowIndex傳遞給窗口。溫我試着提醒a在testfunction的值，它出現爲undefined。請幫助和下面是我的代碼。

JS文件：當執行pass

Ext.onReady(function() { 
    var rIx; 
    Ext.create('Ext.data.Store', { 
     storeId:'employeeStore', 
     fields:['firstname', 'lastname', 'senority', 'dep', 'hired'], 
     data:[ 
      {firstname:"Michael", lastname:"Scott", senority:7, dep:"Manangement", hired:"01/10/2004"}, 
      {firstname:"Dwight", lastname:"Schrute", senority:2, dep:"Sales", hired:"04/01/2004"}, 
      {firstname:"Jim", lastname:"Halpert", senority:3, dep:"Sales", hired:"02/22/2006"}, 
      {firstname:"Kevin", lastname:"Malone", senority:4, dep:"Accounting", hired:"06/10/2007"}, 
      {firstname:"Angela", lastname:"Martin", senority:5, dep:"Accounting", hired:"10/21/2008"} 
     ] 
    }); 

    Ext.create('Ext.grid.Panel', { 
     title: 'Employee Data', 
     store: Ext.data.StoreManager.lookup('employeeStore'), 
     columns: [ 
      { text: 'First Name', dataIndex: 'firstname' }, 
      { 
       header: 'Button', 
       xtype: 'actioncolumn', 
       icon : 'test.png', 
       handler: function(grid, rowIndex, colIndex, item, e , record) { 
        rIx=rowIndex; 
        //var rec = grid.getStore().getAt(rowIndex); 
        //alert("Edit " + rec.get('firstname')); 
        Ext.create('MyWindow').show(); 
       } 
      } 

     ], 

     width: 500, 
     renderTo: Ext.getBody() 
    }); 

    var testFunction = function(a){alert("a= "+a); 

     var r = Ext.data.StoreManager.lookup('employeeStore').getAt(a); 
     var firstname = r.get('firstname'); 
     Ext.getCmp('fname').setValue(firstname); 
    }; 

    Ext.define('MyWindow', { 
     extend: 'Ext.window.Window', 
     store : Ext.data.StoreManager.lookup('employeeStore'), 
     height: 250, 
     width: 250, 
     title: 'My Window', 
     items: [ 
        { 
         xtype: 'textfield',   
         id : 'fname', 
         fieldLabel:'Name' 
        } 

       ], 
     listeners: { 
         afterrender: Ext.Function.pass(testFunction, [rIx]) 
       } 
     }); 

}); 

Answer 1

Ext.Function.pass(testFunction, [rIx])需要的rIx當前值。這個方法在rIx被設定爲任何有意義之前就被調用。 Javascript是一種通過價值的語言。最終rIx被設置爲行索引並不重要。到那時，Ext.Function.pass已經被執行，它傳入的參數是未定義的。

另一種方法是僅將rowIndex作爲屬性推送到窗口上。

Ext.create('Ext.grid.Panel', { 
    title: 'Employee Data', 
    store: Ext.data.StoreManager.lookup('employeeStore'), 
    columns: [ 
     { text: 'First Name', dataIndex: 'firstname' }, 
     { 
      header: 'Button', 
      xtype: 'actioncolumn', 
      icon : 'test.png', 
      handler: function(grid, rowIndex, colIndex, item, e , record) { 
       Ext.create('MyWindow', {rIx: rowIndex}).show(); 
      } 
     } 

    ], 
    width: 500, 
    renderTo: Ext.getBody() 
}); 

Ext.define('MyWindow', { 
    extend: 'Ext.window.Window', 
    store : Ext.data.StoreManager.lookup('employeeStore'), 
    height: 250, 
    width: 250, 
    title: 'My Window', 
    items: [ 
     { 
      xtype: 'textfield',   
      id : 'fname', 
      fieldLabel:'Name' 
     } 
    ], 
    listeners: { 
     afterrender: function(win){ 
      alert("idx= " + win.rIx); 
      var r = Ext.data.StoreManager.lookup('employeeStore').getAt(win.rIx); 
      var firstname = r.get('firstname'); 
      Ext.getCmp('fname').setValue(firstname); 
     } 
    } 
}); 

另一種選擇是設置窗口在你的處理函數afterrender聽衆，而不是在窗口的類定義添加它。在我看來，這種方法有點乾淨。我不喜歡將無關的狀態屬性添加到組件中。

Ext.create('Ext.grid.Panel', { 
    title: 'Employee Data', 
    store: Ext.data.StoreManager.lookup('employeeStore'), 
    columns: [ 
     { text: 'First Name', dataIndex: 'firstname' }, 
     { 
      header: 'Button', 
      xtype: 'actioncolumn', 
      icon : 'test.png', 
      handler: function(grid, rowIndex, colIndex, item, e , record) { 
       var win = Ext.create('MyWindow'); 
       // add the listener after to avoid bashing any listener config 
       // that may already exist for the window. 
       win.on('afterrender', function() { 
        // rowIndex is available in the closure 
        alert("idx= " + rowIndex); 
        var r = Ext.data.StoreManager.lookup('employeeStore').getAt(rowIndex); 
        var firstname = r.get('firstname'); 
        Ext.getCmp('fname').setValue(firstname); 
       }); 
       win.show(); 
      } 
     } 

    ], 
    width: 500, 
    renderTo: Ext.getBody() 
});