Is there a preferred way to refer to other items within a view?

In the code below, I'm trying to refer to the text area after the "Save" button is pressed in my onBtnAddNoteTap, so I can fire off an event with the value of the text area, rather than having a direct reference to the text area in my controller.

Code:
Ext.define('MyApp.view.AddNoteView', {    extend: 'Ext.form.Panel',


    config: {
        items: [
            {
                xtype: 'textareafield',
                id: 'txtAddNote',
                itemId: 'txtAddNote',
                padding: '0 0 20 0',
                label: 'Note'
            },
            {
                xtype: 'button',
                itemId: 'btnAddNote',
                text: 'Save'
            }
        ],
        listeners: [
            {
                fn: 'onBtnAddNoteTap',
                event: 'tap',
                delegate: '#btnAddNote'
            }
        ]
    },


    onBtnAddNoteTap: function(button, e, options) {
        this.fireEvent('btnAddNotePressed');
        console.log(this.txtAddNote,'button - getTxtAddNote');
    }


});