Link Button or Hyper link

[jphillips]

Thanks for your reply Animal. I went to the 3.0 user extension area and there were none posted. I went to http://www.extjs.com/learn/Ext_Exten...3.0_Extensions. Is there another area to look for extensions? I also went to http://extjs-ux.org/ and could not locate it there either.

Jeff

[Animal]

You can't have looked very hard.

http://www.extjs.com/forum/showthread.php?t=80639

[karl.forner]

Sorry, but this does not seem to be the 3.0 version.
The Button.getTemplateArgs() of the 3.x version already returns 6 args, so your href and target should be {6} and {7},

[jphillips]

I did get it to work but had to adjust several of the parameter arguments.

[karl.forner]

Could you post it ? I'm just trying to do the same...
Thanks

[jphillips]

Be aware we changed the class from Ext.LinkButton to Ext.ux.LinkButton

/**
 * @class Ext.ux.LinkButton
 * @extends Ext.Button
 * A Button which encapsulates an <a> element to enable navigation, or downloading of files.
 * @constructor
 * Creates a new LinkButton
 * @author: extjs user animal
 */ 
Ext.ux.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> </i></td>',
                '<td class="x-btn-tc"></td>',
                '<td class="x-btn-tr"><i> </i></td>',
            '</tr>',
            '<tr>',
                '<td class="x-btn-ml"><i> </i></td>',
                '<td class="x-btn-mc">',
                    '<em class="{5}" unselectable="on">',
                        '<a href="{6}" style="display:block" target="{7}" class="x-btn-text {2}" style="text-decoration: none; color: black; padding-left: 3px; padding-right: 3px;">{0}</a>',
                    '</em>',
                '</td>',
                '<td class="x-btn-mr"><i> </i></td>',
            '</tr>',
            '<tr>',
                '<td class="x-btn-bl"><i> </i></td>',
                '<td class="x-btn-bc"></td>',
                '<td class="x-btn-br"><i> </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.ux.LinkButton);

[karl.forner]

Thanks a lot, it works perfectly !

[phoenixjj]

I need to add one download button in Ext JS grid panel, which should result in File Download, so i have modified above code to fit with ExtJS 4.

//Ext JS 4.x class definition

/**
 * @class Ext.ux.button.LinkButton
 * @extends Ext.Button
 * A Button which encapsulates an <a> element to enable navigation, or downloading of files.
 * @constructor
 * Creates a new LinkButton
 */ 
Ext.define('Ext.ux.button.LinkButton', {
    
    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();
        }
});

Also i need to some extra parameter in URL, but setParams() method is appending [Object Object] to url in query string.

Also tried to do the way done in getHref() function of Button class, but it was appending 'undefined' in url.

So i have done old cheap way in my handler function.

btn.href = btn.href + '&start=0&page=0&limit=' + store.getTotalCount();


Thanks.
Phoenix

[mayur_satasiya]

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

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

Hi Condor,
i want to open that link in new tab. so what to do please help me. Thanks in advance

Mayur