Link Button or Hyper link

[nikhilwalker]

Hi All,

I want to know how to add a link button (Hyper link) using Ext JS framework?

Can anybody please help me?

[Condor]

Ext doesn't have a link component, but you could simply use:

{
  xtype: 'box',
  autoEl: {tag: 'a', href: 'http://www.google.com', html: 'Google'}
}

[nikhilwalker]

Thanks It works.

Also how can I style to the hyper link created using above method?

[Condor]

Using cls:'my-class' or style:{color: 'red'} in the autoEl config.

[Animal]

Here's a LinkButton class for 2.2

Ext.LinkButton = Ext.extend(Ext.Button, {
    template: new Ext.Template(
        '<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
        '<td class="x-btn-left"><i>&amp;#160;</i></td><td class="x-btn-center"><a class="x-btn-text" href="{1}" target="{2}">{0}</a></td><td class="x-btn-right"><i>&amp;#160;</i></td>',
        "</tr></tbody></table>"),
	
    onRender:   function(ct, position){
        var btn, targs = [this.text || ' ', this.href, this.target || "_self"];
        if(position){
            btn = this.template.insertBefore(position, targs, true);
        }else{
            btn = this.template.append(ct, targs, true);
        }
        var btnEl = btn.child("a:first");
        btnEl.on('focus', this.onFocus, this);
        btnEl.on('blur', this.onBlur, this);

        this.initButtonEl(btn, btnEl);
        btn.un(this.clickEvent, this.onClick, this);
        Ext.ButtonToggleMgr.register(this);
    }
});

You will need to upgrade it when you move to 3.0:

Ext.LinkButton = Ext.extend(Ext.Button, {
    template: new Ext.Template(
        '<table cellspacing="0" class="x-btn {3}"><tbody class="{4}">',
        '<tr><td class="x-btn-tl"><i>&amp;#160;</i></td><td class="x-btn-tc"></td><td class="x-btn-tr"><i>&amp;#160;</i></td></tr>',
        '<tr><td class="x-btn-ml"><i>&amp;#160;</i></td><td class="x-btn-mc"><em class="{5}" unselectable="on"><a href="{6}" target="{7}" class="x-btn-text {2}"><button>{0}</button></a></em></td><td class="x-btn-mr"><i>&amp;#160;</i></td></tr>',
        '<tr><td class="x-btn-bl"><i>&amp;#160;</i></td><td class="x-btn-bc"></td><td class="x-btn-br"><i>&amp;#160;</i></td></tr>',
        '</tbody></table>').compile(),

    buttonSelector : 'a:first',

    getTemplateArgs: function() {
        return Ext.Button.prototype.getTemplateArgs.apply(this).concat([this.href, this.target]);
    },

    onClick : function(e){
        if(e.button != 0){
            return;
        }
        if(!this.disabled){
            this.fireEvent("click", this, e);
            if(this.handler){
                this.handler.call(this.scope || this, this, e);
            }
        }
    }
});

The ampersand messes are ampersand hash 160 semicolon. The forum does not let us post correctly.

[thoreking]

nice !

but what about if we need to add a params to the url ?.. the href can't be changed dynamically after the button is rendered...

T.

[Animal]

I had that requirement too.

I have the code somewhere. Bump this thread tomorrow, and I'll try to find it.

[Animal]

If you are using Ext 2.2.1, then change your class to use getTemplateArgs instead of just assigning targs.

then add:

    params: {},

    baseParams: {},

    getTemplateArgs: function() {
        return [this.text || ' ', this.href, this.target || "_self", this.getHref(), this.target]);
    },

    getHref: function() {
        var result = this.href;
        var p = Ext.urlEncode(Ext.apply(Ext.apply({}, this.baseParams), this.params));
        if (p.length) {
            result += ((this.href.indexOf('?') == -1) ? '?' : '&') + p;
        }
        return result;
    },

    setParams: function(p) {
        this.params = p;
        this.el.child(this.buttonSelector, true).href = this.getHref();
    }

Then calling setParams at any time will update the href in the <a> element.

[thoreking]

I understand the idea. clever..
But what do you mean by not using the targets anymore in the class and using getTemplateArgs method ?.. to render the button you will still need to use the template ?..
T.

[Animal]

Yes, but pull the data for the template from a call to getTemplateArg() instead of just creating the targs array.