按鈕處理程序中的擴展ExtJS對象屬性

Question

我真的很難從窗體上的按鈕處理程序中訪問一個變量，該變量是擴展的FromPanel的屬性。如果任何人可以提供幫助，我將不勝感激。

實例的形式，我嘗試從updateUnitsButton的處理程序中訪問myAttribute：

TrainOverviewPanel = Ext.extend(Ext.FormPanel, { 
    myAttribute: undefined 
    ,initComponent:function() { 
     var unitIdField1 = new Ext.form.TextField({ 
      itemId: 'unitIdField1', 
      flex: 1 
     }); 
     var unitIdField2 = new Ext.form.TextField({ 
      itemId: 'unitIdField2', 
      flex: 1 
     }); 
     var unitIdField3 = new Ext.form.TextField({ 
      itemId: 'unitIdField3', 
      flex: 1 
     }); 
     var unitIdFields = new Ext.form.CompositeField({ 
      itemId: 'unitIdFields', 
      items: [unitIdField1, unitIdField2, unitIdField3], 
      width: 200 
     }); 

     var updateUnits = function() { 
      alert("How can I access attribute: " + this.myAttribute); 
     } 
     var updateUnitsButton = new Ext.Button({ 
      tdoId: undefined, 
      text: 'Update', 
      handler: updateUnits, 
      width: 50 
     }); 

     var updatableUnitIdFields = new Ext.form.CompositeField({ 
      readOnly: false, 
      fieldLabel: 'Unit ID', 
      itemId: 'updatableUnitIdFields', 
      items: [unitIdFields, updateUnitsButton], 
      width: 300 
     }); 

     Ext.apply(this, { 
      width: 450, 
      height: 130, 
      margins:'10 0 0 0', 
      items: [ updatableUnitIdFields ] 
     }); 
     TrainOverviewPanel.superclass.initComponent.apply(this, arguments); 
    } 

    ,onRender:function() { 
     TrainOverviewPanel.superclass.onRender.apply(this, arguments); 
    } 

    ,refresh: function(data) { 
     this.myAttribute = data.myAttribute; 
     var unitIdFields = this.getComponent('updatableUnitIdFields').items.get(0); 
     unitIdFields.items.get(0).setValue(data.stockId1); 
     unitIdFields.items.get(1).setValue(data.stockId2); 
     unitIdFields.items.get(2).setValue(data.stockId3); 
    } 
}); 

Answer 1

你可以用兩種方式做到這一點。

• 第一個

使用閉合：

// ... 
var me = this; 
var updateUnits = function() { 
    alert("How can I access attribute: " + me.myAttribute); 
}; 
var updateUnitsButton = new Ext.Button({ 
    tdoId: undefined, 
    text: 'Update', 
    handler: updateUnits, 
    width: 50 
}); 
// ... 

• 第二個

通過發送範圍變量來處理程序：

// ... 
var updateUnits = function() { 
    alert("How can I access attribute: " + this.myAttribute); 
}; 
var updateUnitsButton = new Ext.Button({ 
    tdoId: undefined, 
    text: 'Update', 
    //handler: updateUnits, 
    width: 50 
}); 
updateUnitsButton.on('click', updateUnits, this); 
// ...