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
    87
    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
    87
    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,498
    Vote Rating
    46
    Animal has a spectacular aura about Animal has a spectacular aura about

      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,498
    Vote Rating
    46
    Animal has a spectacular aura about Animal has a spectacular aura about

      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,498
    Vote Rating
    46
    Animal has a spectacular aura about Animal has a spectacular aura about

      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,498
    Vote Rating
    46
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."