Extended ExtJS object attributes in button handler

Question

I'm having real difficulty getting access to a variable that is an attribute of an extended FromPanel from within a button handler on the form. If anyone could offer assistance I'd greatly appreciate it.

Example form where I try to access myAttribute from within the handler of updateUnitsButton:

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

You can do it using two ways.

• The first one

using closure:

// ...
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
});
// ...

• The second one

by sending scope variable to handler:

// ...
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);
// ...