1. #61
    Ext User
    Join Date
    Nov 2007
    Posts
    62
    Vote Rating
    0
    jphillips is on a distinguished road

      0  

    Default


    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

  2. #62
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    You can't have looked very hard.

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

  3. #63
    Ext User
    Join Date
    Aug 2009
    Posts
    3
    Vote Rating
    0
    karl.forner is on a distinguished road

      0  

    Default


    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},

  4. #64
    Ext User
    Join Date
    Nov 2007
    Posts
    62
    Vote Rating
    0
    jphillips is on a distinguished road

      0  

    Default


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

  5. #65
    Ext User
    Join Date
    Aug 2009
    Posts
    3
    Vote Rating
    0
    karl.forner is on a distinguished road

      0  

    Default


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

  6. #66
    Ext User
    Join Date
    Nov 2007
    Posts
    62
    Vote Rating
    0
    jphillips is on a distinguished road

      0  

    Default


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

    Code:
    /**
     * @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);
    Last edited by jphillips; 16 Oct 2009 at 9:45 AM. Reason: update

  7. #67
    Ext User
    Join Date
    Aug 2009
    Posts
    3
    Vote Rating
    0
    karl.forner is on a distinguished road

      0  

    Default


    Thanks a lot, it works perfectly !

  8. #68
    Sencha User
    Join Date
    May 2011
    Posts
    9
    Vote Rating
    0
    phoenixjj is on a distinguished road

      0  

    Default


    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.

    Code:
    //Ext JS 4.x class definition
    
    /**
     * @class Ext.ux.button.LinkButton
     * @extends Ext.Button
     * A Button which encapsulates an &lt;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

  9. #69
    Sencha User
    Join Date
    Apr 2012
    Posts
    38
    Vote Rating
    -5
    mayur_satasiya can only hope to improve

      0  

    Default


    Quote Originally Posted by Condor View Post
    Ext doesn't have a link component, but you could simply use:

    Code:
    {
      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

  10. #70
    Sencha User
    Join Date
    Apr 2010
    Posts
    1
    Vote Rating
    0
    jstrika is on a distinguished road

      0  

    Default


    In ExtJS 4.11 I'm getting error: Uncaught TypeError: Object #<Object> has no method 'concat'

    Version below will fix this:
    Code:
    /** * @class Ext.ux.button.LinkButton
     * @extends Ext.Button
     * A Button which encapsulates an &lt;a> element to enable navigation, or downloading of files.
     * @constructor
     * Creates a new LinkButton
     *
     * Example usage:
     * 
     *    // add reference:
     *        requires: [
     *            'Ext.ux.button.LinkButton'
     *        ],
     * 
     *    // add to items list:
     *         items: [
     *        ...
     *             {
     *                 xtype: 'linkbutton',
     *                 href: "http://www.sencha.com",
     *                 target: "_blank",
     *                 text: 'Go to Sencha'
     *             }
     *        ...
     *         ]
     */ 
    Ext.define('Ext.ux.button.LinkButton', {
        extend: 'Ext.Button',
        alias: 'widget.linkbutton',
        template: new Ext.Template(
                '<table cellspacing="0" class="x-btn {3}"><tbody class="{1}">',
                    '<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="{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> </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]);
                //return Ext.Button.prototype.getTemplateArgs.apply(this);
            },
    
    
            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();
            }
    });