calling object function from an event handler

Question

I'm getting "Uncaught ReferenceError: searchPerson is not defined" in the code bellow.

How can I call the "searchPerson" from the "onTriggerClick" event handler?

Ext.define('App.view.search.Base', {
extend: 'Ext.window.Window',
layout: 'vbox',
items:[
    {
        xtype: 'container',
        height:30,
        layout: 'hbox',
        width: '100%',
        items: [
            comboChoice= Ext.create('Ext.form.ComboBox', {
                width: 150,
                padding: '0 20 0 0'
            }),
            edPerson= Ext.create('Ext.form.field.Trigger', {
                triggerCls: 'x-form-search-trigger',
                flex: 1,
                onTriggerClick: function() {

                    **searchPerson(); //it does not work this way**

                }
            })
        ]
    },
    {
        xtype: 'grid',
        flex: 1,
        width: '100%',
        columns: [
            { text: 'Name',  dataIndex: 'name' },
            { text: 'Email', dataIndex: 'email', flex: 1 },
            { text: 'Phone', dataIndex: 'phone' }
        ]
    }
],
searchPerson: function() {
    alert('done!');
}
});

Answer 1

I had to access the top container (App.view.search.Base), that is the object I want. So, first I put an alias for this object:

Ext.define('App.view.search.Base', {
  extend: 'Ext.window.Window',
  layout: 'vbox',
  alias: 'widget.searchbase',

second, get access to this object in the event handler:

this.up('searchbase').searchPerson(this);

Answer 2

It's better to do it this way, so you don't have to rely on arbitrary queries:

Ext.define('App.view.search.Base', {
    extend: 'Ext.window.Window',
    layout: 'vbox',

    initComponent: function() {
        this.items = [{
            xtype: 'container',
            height: 30,
            layout: 'hbox',
            width: '100%',
            items: [Ext.create('Ext.form.ComboBox', {
                width: 150,
                padding: '0 20 0 0'
            }), Ext.create('Ext.form.field.Trigger', {
                triggerCls: 'x-form-search-trigger',
                flex: 1,
                onTriggerClick: Ext.Function.bind(this.searchPerson, this)
            })]
        }, {
            xtype: 'grid',
            flex: 1,
            width: '100%',
            columns: [{
                text: 'Name',
                dataIndex: 'name'
            }, {
                text: 'Email',
                dataIndex: 'email',
                flex: 1
            }, {
                text: 'Phone',
                dataIndex: 'phone'
            }]
        }];
        this.callParent();
    },

    searchPerson: function() {
        alert('done!');
    }
});