Extjs 4, Event handling, scope, custom components

Question

I have following problem. I have grid with tbar. Inside tbar I have number of Ext.form.field.Trigger.

When the user click on trigger button I want to filter the store using function that is provided with grid. I want to define functionality of triggerclick inside defined class, so I can reuse this component with different grid.

So, in short I want to find the panel where clicked component is placed and call panel function, or pass reference of panel to triggerclick, or fire an event with some parameter that will calculated based on where the button was clicked, or maybe there is a better method to accomplish this.

The code (FilterField -> extension of trigger):

Ext.define('GSIP.core.components.FilterField', {
    extend: 'Ext.form.field.Trigger',
    alias: 'widget.filterfield',
    initComponent: function() {

        this.addEvents('filterclick');
        this.callParent(arguments);
    },
    onTriggerClick: function(e, t) {

        //Ext.getCmp('gsip_plan_list').filterList(); - working but dont want this

        //this.fireEvent('filterclick'); - controller cant see it,

        //this.filterList; - is it possible to pass scope to panel or reference to panel

        //e.getSomething() - is it possible to get panel via EventObject? smth like e.getEl().up(panel)


    }
});

---

code of panel:

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

---

part of code of Controller:

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();
},

Answer 1

Controller can listen to anything. Just need to specify exactly what to. But I would fire events on the panel level - add this into your trigger handler:

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