extjs - 使用 ComponentQuery 匹配图表中的系列

Question

我正在使用带有 MVC 的 ExtJS 4。我有一个包含两个系列的图表:行和柱。单击一列时，我需要触发一个事件。

在 Controller 中，我使用以下查询来匹配列系列，但不起作用。

this.control({
    '#companyChartItemId[series[type=column]]': {
        itemmouseup:this.onItemMouseUp
    }
});

有什么想法我该如何匹配它吗？

下面是我的代码:

app/view/company/Chart.js

Ext.define('Market.view.company.Chart', {
    extend: 'Ext.chart.Chart',
    xtype: 'companyChart',
    requires: ['Market.store.HistoricalMarketData'],
    theme: 'Category1',
    store:'HistoricalMarketData',
    initComponent: function() {
        this.callParent();
    },
    axes: [{
        type: 'Numeric',
        position: 'left',
        fields: ['close'],
        title: 'Price',
        grid: true
    }, {
        type: 'Numeric',
        position: 'right',
        fields: ['volume'],
        title: 'Volume',
        grid: true
    }, {
        type: 'Category',
        position: 'bottom',
        fields: ['time'],
        title: 'Month of the Year'
    }],

    series: [{
        type: 'column',
        axis: 'right',
        xField: 'time',
        yField: 'volume',
        highlight: true,
        markerConfig: {
            type: 'cross',
            size: 3
        }
    }, {
        type: 'line',
        axis: 'left',
        smooth: false,
        fill: false,
        fillOpacity: 0.8,
        xField: 'time',
        yField: 'close'
    }]
});

app/controller/ChartController.js

Ext.define('Market.controller.ChartController', {
    extend:'Ext.app.Controller',
    stores:['MarketData'],
    init: function() {
        this.control({
            '#companyChartItemId[series[type=column]]': {
                itemmouseup:this.onItemMouseUp
            }
        });
    },

    onItemMouseUp: function (item) {
        //do something
    }
});

Answer 1

我只需配置您定义系列的监听器/响应函数。您可以将监听器添加为系列中的配置，请查看文档: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.chart.series.Series-cfg-listeners