extjs4 MVC listeners in controller

Question

I'm having trouble creating a listener for the 'itemmouseup' event for my series chart, in the controller.

Controller:

init: function () {
    this.control({
        'monthbalance > chart': {
            render: this.onChartRendered,
            itemmouseup : this.onChartClick
        },          
    });
},

if I insert the 'mouseup' event instead of 'itemmouseup' it works fine. But I need 'itemmouseup'. Where am I going wrong?

Thanks.

Update with view extract:

        },{
        id: 'card-1',
        xtype: 'chart',
        store: 'MonthBalances',
        title: 'This Year vs Previous Years',
        theme: 'Category1',
        legend: {position: 'right'},
        shadow: true,
        axes: [{
            type: 'Numeric',
            position: 'left',
            fields: ['monthbalance','monthlastyear','monthpreviousyear'],
            label: {
                renderer: Ext.util.Format.numberRenderer('0,0')
            },
            grid: true,
            minimum: 0
        },{
            type: 'Category',
            position: 'bottom',
            fields: ['month']
        }],

        series: [{
            type: 'line',
            title: 'this year',
            itemId: 'lineone',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            xField: 'month',
            yField: 'monthbalance',
        //  listeners: {
        //      itemmouseup: function() {
        //          console.log('itemmouseup-thisyear');
        //      }
        //  },
        },{
            type: 'line',
            title: 'one year ago',
            itemId: 'linetwo',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            xField: 'month',
            yField: 'monthlastyear',
        },{
            type: 'line',
            id: 'linethree',
            name: 'linethree',
            itemId: 'linethree',
            alias: 'widget.linethree',
            title: 'two years ago',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            xField: 'month',
            yField: 'monthpreviousyear',

        }]
    }];

sra · Accepted Answer · 2013-01-23T08:04:07.010

1

Because there is no itemmouseup event for Chart. This event is only available for classes that extend Ext.view.View or Ext.panel.Table

I think you need to access the series directly and not the chart that holds the series. Set your control to the series itself that you use within the chart and not to the chart. You may do this by setting the id property of the series chart so that you can bind the control to that id.

// untested but it should work
init: function () {
    this.control({
        '#your-id': {
            itemmouseup : this.onChartClick
        },          
    });
},

edited Jan 23 '13 at 08:04

answered Jan 17 '13 at 07:34

sra

23,820
7
55
89

Ok, I see. I had it working as a listener that I placed in my view, like in the [docs](http://docs.sencha.com/ext-js/4-1/#!/api/Ext.chart.series.Series), but I really want it in my controller. Can it only be defined in the view? – polarbear Jan 17 '13 at 21:23
I can access the series lines through `Ext.ComponentQuery.query('.chart')[0].series.items` in my console, but can't figure out how to access them in the `init` in my controller. Any ideas? Thanks – polarbear Jan 23 '13 at 02:10
@polarbear I must admit that this is a good question... I don'T have the time to dig deeper and a quick glance at the API didn't helped much. Just one tip; you can defiantly access it by it's `id` property which you should set by your own this case. Even if I do not like setting id's manually in this case it will be necessary. – sra Jan 23 '13 at 08:01

extjs4 MVC listeners in controller

1 Answers1