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

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

      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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

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

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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar