Get reference from ext component

Question

I'm having difficulties retrieving my input values through Extjs6's references. There doesn't seem to be a clear cut answer and google is polluted with answers that seem distinct to many different Extjs versions.

I have a window which contains a textfield and a save button, from the textfield I need to retrieve the user's input and pass it along to my ajax call.

My code:

window.updatePassword = function(button) {
   var win = new Ext.Window({
       referenceHolder: true,
       items: [{
            xtype: 'form',
            items: [{
                xtype: 'textfield',
                fieldLabel: "newPassword",
                reference: 'newPassword',
                inputType: 'password'
            }],
        }],
        buttons: [{
            text: 'save',
            handler: function (btn) {
                Ext.Ajax.request({
                    url: '../../Password_updatePassword.action',
                    params : {
                        newPassword: win.newPassword
                    },
                    scope: this,
                    disableCaching: true
                });
             },
             scope: this
        }]
   });
   win.show(this);
};

The things I've tried so far:

this.lookupReference('newPassword')
win.values
win.getValues()
win.newPassword
Ext.getCmp('newPassword')

Any advice would be appreciated.

Answer 1

• this.lookupReference('newPassword') - This refers to current object and handler dont have any component to lookup.
• win.values - doesnt make any sense unless you have created a config in win.
• win.getValues() - again doesnt make any sense unless you have create a method in win.
• win.newPassword - again same.
• Ext.getCmp('newPassword') - getCmp works with id, not with reference.

To get the reference of password field you can lookup on win object,

win.lookupReference('newPassword');

To get the value you have to use getValue() method.

win.lookupReference('newPassword').getValue();