Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ext Js: make button a link

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?

like image 515
flybywire Avatar asked Dec 28 '10 08:12

flybywire


2 Answers

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;
        }
    } 
}); 
like image 67
Stefan Gehrig Avatar answered Oct 17 '22 21:10

Stefan Gehrig


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

like image 3
Brian Moeskau Avatar answered Oct 17 '22 23:10

Brian Moeskau