Extjs: Modify link (<a>) 'on click'

Question

I have created a HTML link (<a>) using the Extjs BoxComponent and it works just fine. But instead of having a fixed URL associated with the link, I want to be able to update the href property when the user clicks the link.

In the code below the href is updated when the user cliks the link and I can verify this using FireBug on the HTML element. But the new page opening is missing my addition to the href.

Question: Is it too late to modify the href on onClick or is it because I am modifying the href in the wrong way?

Code:

Click to copy

xtype: 'box',
html: '<a href="www.google.com" target="_blank">Link to google</a>',        
listeners: {
    render: function (c) {          
        c.getEl().on(
            'click',
            function() {
                this.el.child('a', true).href = 'www.google.com/#q=' + some_dynamic_value;
            },
            c,
            { stopEvent: false }
        );
    }
}

Answer 1

Looks like this can work by using the mousedown event, instead of the click event.

Check out: http://jsfiddle.net/sadkinson/rF5TQ/15/

Answer 2

Its possible that by the time the click has happened changing the URL within it is too late. Is it not possible that whatrever causes your link to need updating can be done when that is changed rather than waiting till the user has clicked the link?

I would imagine a number of browsers would ignore this, simply because it would be an efficient way of being malicious. Putting a link to say "google" and then redirecting you to some virus ridden site etc, as even the most sensible user looking to see where a link would take them would see google until it was too late.