按钮处理程序中的扩展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); 
// ...