I simply want to add a hyper link in my application. I tried the following code and the link is appearing in the page. But the on click event is not working. Can anyone please tell me what might be the reason?

xtype:'box',
isFormField: true,
id: "prospectStageLink",
style: "padding: 3px",
autoEl:{
    //html: '&nbsp;<a href>Link To Prospect</a>'
    tag: 'a',
    href: '#',
    cn: 'Link To Prospect'
},
listeners: {
    render: function(c){
        c.on('click', function(e){
            alert('clicked', 'hiii');
        }, c, { stopEvent: true });
    }
}

I simply want to add a hyper link in my application. I tried the following code and the link is appearing in the page. But the on click event is not working. Can anyone please tell me what might be the reason?

xtype:'box',
isFormField: true,
id: "prospectStageLink",
style: "padding: 3px",
autoEl:{
    //html: '&nbsp;<a href>Link To Prospect</a>'
    tag: 'a',
    href: '#',
    cn: 'Link To Prospect'
},
listeners: {
    render: function(c){
        c.on('click', function(e){
            alert('clicked', 'hiii');
        }, c, { stopEvent: true });
    }
}

• javascript
• extjs
• hyperlink

3 Answers 3

try this :

listeners: {
    render: function(ponent) {
        ponent.getEl().on('click', function(e) {
            alert('test');
        });    
    }
}

I assume you are not running on ExtJS 4, because BoxComponent was removed from it.

Anyways, the simple explanation is probably that BoxComponent does not have a click event. You might want to try using an Element instead, which does have support for the click event.

xtype:'box',
isFormField: true,
id: "prospectStageLink",
style: "padding: 3px",
autoEl:{
    //html: '&nbsp;<a href>Link To Prospect</a>'
    tag: 'a',
    href: '',
    onClick: 'nameYouFunction'
}