Page 1 of 7 123 ... LastLast
Results 1 to 10 of 70

Thread: Link Button or Hyper link

  1. #1
    Ext User
    Join Date
    Nov 2008
    Posts
    17
    Vote Rating
    0
      0  

    Default 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
    118
      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
      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
    118
      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,607
    Vote Rating
    59
      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
      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,607
    Vote Rating
    59
      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,607
    Vote Rating
    59
      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
      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,607
    Vote Rating
    59
      0  

    Default

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

Page 1 of 7 123 ... LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •