Ext.LinkButton A button class which renders an <a> element.

[Animal]

/**
 * @class Ext.LinkButton
 * @extends Ext.Button
 * A Button which encapsulates an <a> element to enable navigation, or downloading of files.
 * @constructor
 * Creates a new LinkButton
 */ 
Ext.LinkButton = Ext.extend(Ext.Button, {
    template: new Ext.Template(
        '<table cellspacing="0" class="x-btn {3}"><tbody class="{1}">',
            '<tr>',
                '<td class="x-btn-tl"><i>&#160;</i></td>',
                '<td class="x-btn-tc"></td>',
                '<td class="x-btn-tr"><i>&#160;</i></td>',
            '</tr>',
            '<tr>',
                '<td class="x-btn-ml"><i>&#160;</i></td>',
                '<td class="x-btn-mc">',
                    '<em class="{2}" unselectable="on">',
                        '<a href="{4}" style="display:block" target="{5}" class="x-btn-text">{0}</a>',
                    '</em>',
                '</td>',
                '<td class="x-btn-mr"><i>&#160;</i></td>',
            '</tr>',
            '<tr>',
                '<td class="x-btn-bl"><i>&#160;</i></td>',
                '<td class="x-btn-bc"></td>',
                '<td class="x-btn-br"><i>&#160;</i></td>',
            '</tr>',
        '</tbody></table>'
    ).compile(),

    buttonSelector : 'a:first',

    /** 
     * @cfg String href
     * The URL to create a link for.
     */
    /** 
     * @cfg String target
     * The target for the &lt;a> element.
     */
    /** 
     * @cfg Object
     * A set of parameters which are always passed to the URL specified in the href
     */
    baseParams: {},

//  private
    params: {},

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

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

    // private
    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;
    },

    /**
     * Sets the href of the link dynamically according to the params passed, and any {@link #baseParams} configured.
     * @param {Object} Parameters to use in the href URL.
     */
    setParams: function(p) {
        this.params = p;
        this.el.child(this.buttonSelector, true).href = this.getHref();
    }
});
Ext.reg('linkbutton', Ext.LinkButton);

CSS rules needed for a pixel-perfect look:

table.x-btn .x-btn-small td.x-btn-mc em a {
    text-decoration: none;
    display: block;
    height: 12px;
    padding-bottom: 2px;
    padding-top: 2px;
}

body.ext-opera  table.x-btn .x-btn-small td.x-btn-mc em a,
body.ext-chrome table.x-btn .x-btn-small td.x-btn-mc em a {
    padding-top: 1px;
}

body.ext-chrome table.x-btn .x-btn-small td.x-btn-mc em a {
    padding-bottom: 3px;
}

[Eric24]

Very nice! I've been trying to adapt this approach for use as a menu item (so instead of a button, a menu item would trigger a file download), but I'm not having much luck. Could you point me in the right direction?

[Animal]

Menu items contain a link anyway.

http://www.extjs.com/deploy/dev/docs...em&member=href

[loeppky]

I totally agree that this functionality should be in the distributed Ext. I would post this in Animal's thread documenting this request (http://www.extjs.com/forum/showthread.php?t=12288), but I don't have premium forum access. Until Ext provides an href config option for Ext.button, one can also do:

    handler : function(button) {
        // Ext doesn't enable buttons to be a plain link, which is what we want in this case.
        // We could use window.open, but most pop-up blockers will block the window.
        // There is no use in creating an anchor tag, because it doesn't expose a click method.
        // @see http://www.extjs.com/forum/showthread.php?t=12288
        button.el.insertHtml(
            'beforeBegin', 
            '<form action="http://yoururl.com" target="_blank" method="get" style="display:none"></form>'
        ).submit();
    } 

This isn't an actual link though, so "Open link in new tab" is not an option.

[smokeman]

I used this with 3.0.3, and used an xtype:'linkbutton', href:'arklegaudit.gov', target:'_new'
and my link button gets rendered, but with a link of http://tapestry/outside3/x-btn-small...con-small-left

which is the internal url of my current app..., strange...

nevermind...if you use the code from this link:
http://www.extjs.com/forum/showthrea...253#post351253
it works like a charm....I thought the code looked a bit different in that post.

[Condor]

The browser sees href:'arklegaudit.gov' as a local url, so it prepends the current url.

You want:

href:'http://arklegaudit.gov'

[smokeman]

I'm using this for a menu on a homepage, so that some buttons can open a new tab, or another page on the site....
The problem I just ran into, is that by switching the standard <button></button> to an <a, when you mix types, it renders a mix of text with underlines, and standard buttons. If I wanted to make this class not do anything to onclick if handler is defined, what would I need to do? That way, I could use the xtype:linkbutton for all buttons, so they look the same, but act differently, based on their definition(if they have a handler, or not)

[smokeman]

no, I said nevermind...the link I included has code that works properly...look at the link I got when using this code....it wasn't a valid url at all....in fact, I tried it with all different types of urls, and they all resulted in the same "x-btn-small%20x-btn-icon-small-left" string as the url.
we might want to change the first post, with the updated code?

The browser sees href:'arklegaudit.gov' as a local url, so it prepends the current url.

You want:

href:'http://arklegaudit.gov'

[Animal]

nthey all resulted in the same "x-btn-small%20x-btn-icon-small-left" string as the url.

I am using that class. Nothing like that happens.

Below, I am hovering the mouse over the "Labels" button which is a link to the generation of a PDF for the current consignment:

[smokeman]

I'm using this for a menu on a homepage, so that some buttons can open a new tab, or another page on the site....
The problem I just ran into, is that by switching the standard <button></button> to an <a, when you mix types, it renders a mix of text with underlines, and standard buttons. If I wanted to make this class not do anything to onclick if handler is defined, what would I need to do? That way, I could use the xtype:linkbutton for all buttons, so they look the same, but act differently, based on their definition(if they have a handler, or not)

I used a workaround, but this functionality would be nice:

I assigned my buttons to a toolbar, and gave the toolbar a cls:'customtoolbar' definition,
then used this css:
.customtoolbar a{
text-decoration:none !important;
}