hyperlinkextjs4extjs4.1extjs-mvcextjs2

How to catch event of hyperlink in controller in extjs4?


I am working in extjs4 MVC.I am getting stuck at a point where I have to catch event click of hyperlink in extjs4.I want to catch that event in controllers 'control' method.I tried a lot but not get solved please some one give some suggestion to how to solve this problem.

1)Here is my some view code :--

Ext.define('AM.view.user.linkView', {
    extend:'Ext.form.Panel',
    alias:'widget.Link',
    title:'hyper link',
    items:[
    {
        xtype: 'box',
        autoEl: {tag: 'a', href: '#', html: 'Click on this button',id:'link'}
    }]
});// End of login class

2)Here is my controller code: ---

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

     views: ['user.linkView'],

     init: function() {
         this.control({
             'Link box[tag: a]':
                 click:this.linkClicked
         });
     },
     linkClicked:function()
     {
         console.log("clicked on link");
     }
});

I tried a lot on it.but not get solved this problem.How can I solve this this please give some suggestion...


Solution

  • Ext.define('AM.view.user.linkView', {
        extend:'Ext.form.Panel',
        alias:'widget.Link',
        name:'linkPanel',
        title:'hyper link',
        items:[
        {
            xtype: 'box',
            autoEl: {tag: 'a', href: '#', html: 'Click on this button',id:'link'}
        }]
    });// End of login class
    

    Use below code in controller

    var controller = this;
    controller.control({
       'linkPanel': {
          afterrender: function() {
               Ext.get('link').on('click', function() {
                    controller.linkClicked();
               });
          }
       }
    });
    

    This will work !!!!

    Thanks