3

次の問題があります。私はグリッドを持っていtbarます。内部tbarには の数がありExt.form.field.Triggerます。

ユーザーがトリガーボタンをクリックすると、提供されている機能を使用してストアをフィルタリングしたいと思いますgrid。triggerclick内部の definedの機能を定義したいclassので、このコンポーネントを別の で再利用できます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();
},
4

1 に答える 1

3

コントローラーは何でも聞くことができます。何をするかを正確に指定する必要があります。ただし、パネル レベルでイベントを発生させます。これをトリガー ハンドラーに追加します。

this.up('panel').fireEvent('triggerclicked');
于 2012-07-17T14:48:00.500 に答える