Ext Js: make button a link

Question

In Ext Js I want some of my buttons to work like links (i.e. <a href...).

How can I do that.

Right now I am adding a handler that does window.location.href=http://.....

But I thought there should be an easier way - something like adding an href attribute like in menu item.

Some ideas?

As far as I know, that's actually the way it's supposed to be done. — Mchl, Dec 28 '10 at 08:23
For ExtJS Modern 6.x (6.5) see https://stackoverflow.com/questions/47494458/extjs-6-x-modern-button-as-a-link/47519792#47519792 — Tony J Watson, Nov 28 '17 at 01:39

Stefan Gehrig · Answer 1 · 2010-12-28T14:10:24.480

That's the way it's done... To be more portable you could extend Ext.Button into Ext.ux.LinkButton (or whatever) and implement the property and the required behavior in this extended class (just a quick-&-dirty example):

Ext.ux.LinkButton = Ext.extend(Ext.Button, {
    href: null,
    handler: function() {
        if (this.href) {
            window.location.href = this.href;
        }
    } 
}); 
Ext.reg( "ux-linkbutton", Ext.ux.LinkButton );

var btn = new Ext.ux.LinkButton({
    text: "Link to Google",
    href: "http://www.google.com"
});

EDIT:

Simple change of appearance:

Ext.ux.LinkButton = Ext.extend(Ext.Button, {
    href: null,
    template: new Ext.Template(
        ['<table id="{4}" 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="{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>'], {compiled: true}),
    buttonSelector : 'a:first-child',
    getTemplateArgs : function(){
        return [this.href, 'x-btn-' + this.scale + ' x-btn-icon-' + this.scale + '-' + this.iconAlign, this.getMenuClass(), this.cls, this.id];
    },
    handler: function(b, e) {
        if (this.href) {
            e.stopEvent();
            window.location.href = this.href;
        }
    } 
});

thank you. Why can't it be like in menu item (so when the user hovers he can see where the link will take him in the status bar) — flybywire, Dec 28 '10 at 13:56
To do that you have to override the rendering of the button element to actually render a ``-tag with an `href`-attribute. This shouldn't be too complicated - see my edit above (please note that this is untested and not a throughout solution... — Stefan Gehrig, Dec 28 '10 at 14:04
This does not seem to work in ExtJS 4; would it be difficult to modify it to work in ExtJS4? — Erik Kaplun, Feb 29 '12 at 00:20
@ErikAllik That's because the class system (including the inheritance) has changed with Ext JS 4. If you just want a button that follows a link on click, you can use the `href`-config of the Ext JS 4 button. Changing the appearance is somewhat different but easier. You should open a follow-up question regarding overriding the appearance of Ext JS components. — Stefan Gehrig, Feb 29 '12 at 09:26
+1 for mentioning `e.stopEvent()`. That's what I was looking for. — Paolo Stefan, Sep 26 '14 at 15:34

score 3 · Accepted Answer · answered Dec 28 '10 at 22:43

3

There's also an existing user extension that does exactly this.

answered Dec 28 '10 at 22:43

Brian Moeskau

20,103
8
71
73

Ext Js: make button a link

2 Answers2

Linked