Question

我有以下问题。我有tbar网格。在tbar内，我的号码为Ext.form.field.Trigger。

当用户点击触发按钮时，我想使用grid提供的功能过滤商店。我想在定义的triggerclick中定义class的功能，因此我可以将此组件重用于不同的grid。

因此，简而言之，我希望找到放置了点击组件的面板并调用面板功能，或者将面板参考传递给triggerclick，或者使用根据按钮位置计算的某个参数触发事件单击，或者可能有更好的方法来完成此任务。

代码（FilterField - ＆gt;触发器的扩展名）：

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

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

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

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

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

1 个答案: