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