Question

Update 2: This confirms the cpuchartclicked event is being fired, because the alert('hello') works. What I need is to be able to respond to that event in my controller.

items: [
    {
        xtype: 'image',
        itemId: 'graphiteChartCPU',
        src: '',
        listeners:{
            'afterrender':function (comp) {
                comp.getEl().on('click', function (el) {
                    this.fireEvent('cpuchartclicked');
                }, this);
            },
            'cpuchartclicked':function () {
                alert('hello');
            }
        }
    }

]

Update: With the following, I am setting the scope for the on click handler. fireEvent() seems to be working now, but still not hearing the event in controller.

items: [
    {
        xtype: 'image',
        itemId: 'graphiteChartCPU',
        src: '',
        listeners:{
            'afterrender':function (comp) {
                comp.getEl().on('click', function (el) {
                    alert('on click handler');
                    this.fireEvent('cpuchartclicked');
                }, this);
            }
        }
    }
]

// Listen Application Event
me.application.on({
    cpuchartclicked: me.onChartClicked,
    scope: me
});

I'm trying to fire a custom event on an image el so when the image is clicked the controller hears the event.

But I get an error cmp.fireEvent() is not a function?

items: [{
    xtype: 'image',
    itemId: 'graphiteChartCPU',
    src: '',
    listeners:{
        'afterrender':function (comp) {
        comp.getEl().on('click', function (el) {
        el.fireEvent('cpuchartclicked');
        });
        }
    }
}]

me.application.on({
    cpuchartclicked: this.onChartClicked,
    scope: this
});

No correct solution

OTHER TIPS

You are confusing Components and Elements. The afterrender event listener is set on the Image Component, and receives the Component itself as the first argument (that you named el instead, incorrectly).

Then, in the afterrender listener, you retrieve the main DOM element for that Component, which happens to be an <img> tag, and set click listener on the element object, which is an instance of Ext.dom.Element.

The click event signature is not what you expect; the first argument is an Ext.util.Event object that does not have a fireEvent method. Hence the error.

I would suggest looking up event signatures in the docs before using them. Also try to add a debugger statement before the line that blows up, and see what variables are passed in and what is going on. Using Chrome or Firefox debugger can be immensely helpful here.

Solved it, though I am wondering if this is the best way to do it.

I fire the custom event via the image, and then listen for that event on the image as well in the controller.

items: [
    {
        xtype: 'image',
        itemId: 'graphiteChartCPU',
        src: '',
        listeners:{
            'afterrender':function (comp) {
                comp.getEl().on('click', function (el) {
                    this.fireEvent('cpuchartclicked');
                }, this);
            }
        }
    }
]


'myContainer image':
{
    'cpuchartclicked': me.onChartClicked
}

you must bind to the image element like that:

{
    xtype: 'image',
    itemId: 'graphiteChartCPU',
    src: '',
    listeners: {
      el: {
          click: function() {
          console.log("Click");
          }
      }
    }
}

it solve my problem in ext5

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top