How do I access a numberfield value from a button's handler in ExtJs 4?

Question

I have a panel with the following items:

{
    xtype: 'numberfield',
    id: 'articleFastSearch',
    listeners: {
        scope: this,
        specialkey: function(field, e) {                            
            if (e.getKey() == Ext.EventObject.ENTER) {
                var val = this.rawValue;
                // Do stuff with val
            }
        }
    }
},
{
    id: 'articleFastSearchBtn',
    text: 'Open article',
    scope: this,
    handler: function(btn) {
        console.log(Ext.get("articleFastSearch"));
        var val = Ext.get("articleFastSearch").getValue();
        console.log(val);
        // Do stuff with val
    }
}

The listener on the numberfield works perfectly, but I'm having trouble accessing the numberfield value from the button handler. I tried naming the numberfield and using this.articleFastSearch.getValue() but it didn't work. I think the scope may have been wrong?

I then resorted to giving the numberfield an id and attempting to access it through the dom as shown above. This gives a strange result in that the returned constructor actually contains an HTMLTableElement instead of a numberfield. I can't find the value in the properties so I'm very confused... There are no other elements with the same ID on the page. Any ideas?

Ideally, I'd rather just access the value through the this variable if that's possible, but I'll settle for any solution that works!

Answer 1

Ext.get() return a Ext.Element . what you are looking for is Ext.getCmp() You should also consider the use of the new Ext.ComponentQuery which is also available as shortcut up / down within all classes that inherit from Ext.container.AbstractContainer .