Extjs 4,事件处理,范围,自定义组件

Extjs 4, Event handling, scope, custom components

本文关键字:自定义 组件 范围 事件处理 Extjs      更新时间:2023-10-01

我有以下问题。我有tbar的网格。在tbar内部,我有Ext.form.field.Trigger的编号。

当用户点击触发按钮时,我想使用grid提供的功能过滤商店。我想在定义的class中定义triggerclick的功能,这样我就可以用不同的grid重用这个组件。

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

代码(FilterField->触发器扩展):

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)

    }
});

面板代码:

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