How to handle dom events in controller in extjs4?

Question

I am working in Extjs4, and getting stuck on how to catch an event on hyperlink. I worked on it but couldn't get it solved.

Here is my code:

View code

Ext.define('AM.view.user.linkView', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.Link',
    title: 'My Cool Panel',
    html: '<div><a href="#" id="linkId">This link will open a window</a></div><br /> <label for="myInput">Type here: </label><input name="myInput" type="text" value="" />',
});

Controller code

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    stores: ['Users'],

    models: ['User','Book'],

    views: ['user.Edit', 'user.List','user.Create','user.linkView'],
    init: function() {
        this.control({
             'Link': {
                     afterrender: function(cmp)
                     {
                         Ext.get('#linkId').on('click', function(event, target) {
                            console.log(target);
                        }, this);
                     }
                 }
             });
        }
    });

When I run the code above I get this error:

Uncaught TypeError: Cannot call method 'on' of null

How can I solve this problem?

score 0 · Accepted Answer · answered Apr 20 '13 at 22:27

0

Change the listener to this:

afterrender: function(cmp) {
    cmp.mon(cmp.getEl(), 'click', function(event, target) {
        console.log(target);
    }, this, {delegate: '#linkId'});
}

answered Apr 20 '13 at 22:27

Volodymyr

181
2

But why I can not use Ext.get("").on(---); – Pravin Mane Apr 22 '13 at 06:45
Use Ext.get('linkId') instead of Ext.get('#linkId') if you have only one element with id=linkId. Use delegate in case if you need to set one listener for more then one element. – Volodymyr Apr 22 '13 at 17:59

How to handle dom events in controller in extjs4?

1 Answers1