1. #1
    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 Ext.LinkButton A button class which renders an <a> element.

    Ext.LinkButton A button class which renders an <a> element.


    Code:
    /**
     * @class Ext.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.LinkButton = Ext.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();
        }
    });
    Ext.reg('linkbutton', Ext.LinkButton);
    CSS rules needed for a pixel-perfect look:

    Code:
    table.x-btn .x-btn-small td.x-btn-mc em a {
        text-decoration: none;
        display: block;
        height: 12px;
        padding-bottom: 2px;
        padding-top: 2px;
    }
    
    body.ext-opera  table.x-btn .x-btn-small td.x-btn-mc em a,
    body.ext-chrome table.x-btn .x-btn-small td.x-btn-mc em a {
        padding-top: 1px;
    }
    
    body.ext-chrome table.x-btn .x-btn-small td.x-btn-mc em a {
        padding-bottom: 3px;
    }

  2. #2
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    528
    Vote Rating
    0
    Eric24 is on a distinguished road

      0  

    Default


    Very nice! I've been trying to adapt this approach for use as a menu item (so instead of a button, a menu item would trigger a file download), but I'm not having much luck. Could you point me in the right direction?

  3. #3
    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


    Menu items contain a link anyway.

    http://www.extjs.com/deploy/dev/docs...em&member=href

  4. #4
    Sencha User loeppky's Avatar
    Join Date
    May 2007
    Location
    Seattle, WA
    Posts
    230
    Vote Rating
    0
    loeppky is on a distinguished road

      0  

    Default


    I totally agree that this functionality should be in the distributed Ext. I would post this in Animal's thread documenting this request (http://www.extjs.com/forum/showthread.php?t=12288), but I don't have premium forum access. Until Ext provides an href config option for Ext.button, one can also do:

    PHP Code:
        handler : function(button) {
            
    // Ext doesn't enable buttons to be a plain link, which is what we want in this case.
            // We could use window.open, but most pop-up blockers will block the window.
            // There is no use in creating an anchor tag, because it doesn't expose a click method.
            // @see http://www.extjs.com/forum/showthread.php?t=12288
            
    button.el.insertHtml(
                
    'beforeBegin'
                
    '<form action="http://yoururl.com" target="_blank" method="get" style="display:none"></form>'
            
    ).submit();
        } 
    This isn't an actual link though, so "Open link in new tab" is not an option.
    Do you use DWR? Check out: http://github.com/BigLep/ExtJsWithDwr

  5. #5
    Ext JS Premium Member smokeman's Avatar
    Join Date
    Jul 2007
    Posts
    475
    Vote Rating
    2
    smokeman is on a distinguished road

      0  

    Default 3.0.3

    3.0.3


    I used this with 3.0.3, and used an xtype:'linkbutton', href:'arklegaudit.gov', target:'_new'
    and my link button gets rendered, but with a link of http://tapestry/outside3/x-btn-small...con-small-left

    which is the internal url of my current app..., strange...
    nevermind...if you use the code from this link:
    http://www.extjs.com/forum/showthrea...253#post351253
    it works like a charm....I thought the code looked a bit different in that post.

  6. #6
    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


    The browser sees href:'arklegaudit.gov' as a local url, so it prepends the current url.

    You want:
    Code:
    href:'http://arklegaudit.gov'

  7. #7
    Ext JS Premium Member smokeman's Avatar
    Join Date
    Jul 2007
    Posts
    475
    Vote Rating
    2
    smokeman is on a distinguished road

      0  

    Default blank href

    blank href


    I'm using this for a menu on a homepage, so that some buttons can open a new tab, or another page on the site....
    The problem I just ran into, is that by switching the standard <button></button> to an <a, when you mix types, it renders a mix of text with underlines, and standard buttons. If I wanted to make this class not do anything to onclick if handler is defined, what would I need to do? That way, I could use the xtype:linkbutton for all buttons, so they look the same, but act differently, based on their definition(if they have a handler, or not)

  8. #8
    Ext JS Premium Member smokeman's Avatar
    Join Date
    Jul 2007
    Posts
    475
    Vote Rating
    2
    smokeman is on a distinguished road

      0  

    Default


    no, I said nevermind...the link I included has code that works properly...look at the link I got when using this code....it wasn't a valid url at all....in fact, I tried it with all different types of urls, and they all resulted in the same "x-btn-small%20x-btn-icon-small-left" string as the url.
    we might want to change the first post, with the updated code?

    Quote Originally Posted by Condor View Post
    The browser sees href:'arklegaudit.gov' as a local url, so it prepends the current url.

    You want:
    Code:
    href:'http://arklegaudit.gov'

  9. #9
    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


    Quote Originally Posted by smokeman View Post
    nthey all resulted in the same "x-btn-small%20x-btn-icon-small-left" string as the url.
    I am using that class. Nothing like that happens.

    Below, I am hovering the mouse over the "Labels" button which is a link to the generation of a PDF for the current consignment:


  10. #10
    Ext JS Premium Member smokeman's Avatar
    Join Date
    Jul 2007
    Posts
    475
    Vote Rating
    2
    smokeman is on a distinguished road

      0  

    Default


    Quote Originally Posted by smokeman View Post
    I'm using this for a menu on a homepage, so that some buttons can open a new tab, or another page on the site....
    The problem I just ran into, is that by switching the standard <button></button> to an <a, when you mix types, it renders a mix of text with underlines, and standard buttons. If I wanted to make this class not do anything to onclick if handler is defined, what would I need to do? That way, I could use the xtype:linkbutton for all buttons, so they look the same, but act differently, based on their definition(if they have a handler, or not)
    I used a workaround, but this functionality would be nice:

    I assigned my buttons to a toolbar, and gave the toolbar a cls:'customtoolbar' definition,
    then used this css:
    .customtoolbar a{
    text-decoration:none !important;
    }