1. #1
    Ext User
    Join Date
    Nov 2008
    Posts
    17
    Vote Rating
    0
    nikhilwalker is on a distinguished road

      0  

    Default Link Button or Hyper link

    Link Button or Hyper link


    Hi All,

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

    Can anybody please help me?

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

  3. #3
    Ext User
    Join Date
    Nov 2008
    Posts
    17
    Vote Rating
    0
    nikhilwalker is on a distinguished road

      0  

    Default


    Thanks It works.

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

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    Here's a LinkButton class for 2.2

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

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

  6. #6
    Ext User
    Join Date
    Nov 2007
    Posts
    63
    Vote Rating
    0
    thoreking is on a distinguished road

      0  

    Default


    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.

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      1  

    Default


    I had that requirement too.

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

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      1  

    Default


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

    then add:

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

  9. #9
    Ext User
    Join Date
    Nov 2007
    Posts
    63
    Vote Rating
    0
    thoreking is on a distinguished road

      0  

    Default


    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.

  10. #10
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


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