javascript - 从事件处理程序调用对象函数

Question

我在下面的代码中收到“未捕获的 ReferenceError：searchPerson 未定义”。

如何从“onTriggerClick”事件处理程序中调用“searchPerson”？

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

我必须访问顶部容器（App.view.search.Base），这是我想要的对象。所以，首先我为这个对象设置了一个别名：

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

其次，在事件处理程序中访问此对象：

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

Answer 2

最好这样做，这样您就不必依赖任意查询：

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!');
    }
});