javascript - 如何从Extjs中的 Controller 调用 View 的监听器

Question

我的 View 中有一个条形图，其中有一个正在检索条形列项目的监听器，现在我必须从 Controller 调用该监听器，这是我的代码...

这就是我看来的听众..

listeners: {
    itemmousedown: function (obj) {
        alert(obj.storeItem.data['source'] + ' &' + obj.storeItem.data['count']);
    }
},

我必须从我的 Controller 调用这个监听器。这是我的代码..

init: function () {
    this.control({
        'barColumnChart': { //this is the id of the bar chart in my View
            click: function () {

            }
        }
    });
},

Answer 1

itemmousedown 事件是由“series”触发的，而series不是组件，仅在布局后由图表初始化。因此，为了获取对系列对象的引用，我们需要等待图表的 afterlayout 事件。但不幸的是，图表没有触发布局后事件......因此，首先重写图表的 afterComponentLayout 方法，使其触发事件:

Ext.define('MyNewChart',{
    extend: 'Ext.chart.Chart',
    afterComponentLayout: function(width, height, oldWidth, oldHeight) {
        this.callParent(arguments);
        this.fireEvent('afterlayout', this);
    }
});

现在，使用我们新的图表类来创建您的图表:

Ext.create('MyNewChart', {
     id: 'myChart',
     ...
});

现在我们可以创建一个 Controller ，它实际上在 itemmousedown 事件上创建一个监听器:

Ext.define('Gamma.controller.ControlFile', {
    extend : 'Ext.app.Controller',
    initializedEvents: false,
    init: function() {
        this.control({
            '#myChart': {
                afterlayout: this.afterChartLayout
            }
        });
    },
    afterChartLayout: function(){
        if(this.initializedEvents==true) return;
        this.initializedEvents=true;
        Ext.getCmp('myChart').series.items[0].on('itemmousedown',function(obj){
            console.log(obj);
        });
    }
});

这是一个工作 fiddle :http://jsfiddle.net/qjfBC/