Javascript ExtJS4，事件处理，作用域，自定义组件

我有以下问题。我有

tbar

的网格。在

tbar

内部，我有

Ext.form.field.Trigger的编号

当用户单击触发器按钮时，我希望使用
网格提供的功能过滤存储。我想在定义的
类中定义
触发器click
的功能，这样我就可以在不同的
网格中重用该组件

因此，简而言之，我想找到放置单击组件的面板并调用面板函数，或者将面板的引用传递给
triggerclick
，或者触发一个带有一些参数的事件，这些参数将根据按钮单击的位置进行计算，或者可能有更好的方法来实现这一点

代码（FilterField->触发器扩展）：


专家组代码：


控制器部分代码：

控制器可以听任何东西。只需要具体说明要做什么。但我会在面板级别触发事件-将其添加到触发器处理程序中：

this.up('panel').fireEvent('triggerclicked');

我不确定你的问题中有什么不起作用。您发布了很多代码，但没有告诉我们问题的确切位置。但是你的任务对我在项目中所做的工作似乎很熟悉。有关如何重用组件和控制器的说明，请参阅此问题。我有一个带有filterfield的面板。此面板还具有功能过滤器列表。如何从filterfield轻松调用filterList。Filterfield是Trigger的扩展，所以调用应该来自OnTiggerClick（我想把调用放在类定义中-第一个代码示例）。。您可以向上（'panel'）获取对组件所在面板的引用，并从中调用方法。但我不建议这样做。相反，我会订阅panel类中的filterfield事件，或者生成事件并在controller中订阅它。如何启动（“panel”）-OnTiggerClick接收EventObject和target。如何从中获取组件？所以我可以调用函数。我会尝试其他方法，你可以听任何东西。只需要具体说明要做什么。但我会在面板级别触发事件-将其添加到触发器处理程序中：
this.up（'panel'）.fireEvent（'triggerclicked'）
Ext.define('GSIP.view.plans.PlanReqList', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.gsip_devplan_list',
    id: 'gsip_plan_list',
    title: i18n.getMsg('gsip.view.PlanReqList.title'),
    layout: 'fit',
    initComponent: function() {

        this.store = 'DevPlan';

        this.tbar = [{
            xtype: 'filterfield',
            id: 'filter_login',
            triggerCls: 'icon-user',
            //scope:this - how to pass scope to panel without defining onTriggerClick here
            //          onTriggerClick: function() { 
            //              this.fireEvent('filterclick'); //working event is fired but controller cant see it
            //              this.filterList; //this is working but i dont want to put this code in every filterfield
            //          },
            //          listeners : {
            //              filterclick: function(btn, e, eOpts) { //this is working

            //              }
            //            },
        }];

        this.columns = [{
            id: 'id',
            header: "Id",
            dataIndex: "id",
            width: 50,
            sortable: true,
            filterable: true
        }, {
            header: "Name",
            dataIndex: "name",
            width: 150,
            sortable: true,
            filterable: true
        }, {
            header: "Author",
            dataIndex: "author",
            sortable: true,
            renderer: this.renderLogin,
            filterable: true
        }];

        this.callParent(arguments);


    },
    filterList: function() {
        this.store.clearFilter();

        this.store.filter({
            property: 'id',
            value: this.down("#filter_id").getValue()
        }, {
            property: 'name',
            value: this.down("#filter_name").getValue()
        });
    },
    renderLogin: function(value, metadata, record) {
        return value.login;
    }
});

init: function() {
    this.control({
        'attachments': {
            filesaved: this.scanSaved,
        }
    }, {
        'scan': {
            filesaved: this.attachmentSaved
        }
    }, {
        '#filter_login': {
            filterclick: this.filterStore //this is not listened 
        }
    });
},
filterStore: function() {
    console.log('filtering store');

    this.getPlanListInstance().filter();
},

this.up('panel').fireEvent('triggerclicked');