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?
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> </i></td><td class="x-btn-tc"></td><td class="x-btn-tr"><i> </i></td></tr>',
'<tr><td class="x-btn-ml"><i> </i></td><td class="x-btn-mc"><em class="{2}" unselectable="on"><a href="{0}"></a></em></td><td class="x-btn-mr"><i> </i></td></tr>',
'<tr><td class="x-btn-bl"><i> </i></td><td class="x-btn-bc"></td><td class="x-btn-br"><i> </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;
}
}
});
There's also an existing user extension that does exactly this.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With