javascript Ext Js：使按钮成为链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4544643/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ext Js: make button a link
提问by flybywire
In Ext Js I want some of my buttons to work like links (i.e. <a href...).
在 Ext Js 中，我希望我的一些按钮像链接一样工作（即<a href...）。
How can I do that.
我怎样才能做到这一点。
Right now I am adding a handler that does window.location.href=http://.....
现在我正在添加一个处理程序window.location.href=http://....。
But I thought there should be an easier way - something like adding an href attribute like in menu item.
但我认为应该有一种更简单的方法——比如在菜单项中添加一个 href 属性。
Some ideas?
一些想法？
采纳答案by Brian Moeskau
There's also an existing user extensionthat does exactly this.
还有一个现有的用户扩展可以做到这一点。
回答by Stefan Gehrig
That's the way it's done... To be more portable you could extend Ext.Buttoninto Ext.ux.LinkButton(or whatever) and implement the property and the required behavior in this extended class (just a quick-&-dirty example):
这就是它的完成方式......为了更便携，你可以扩展Ext.Button到Ext.ux.LinkButton（或其他）并在这个扩展类中实现属性和所需的行为（只是一个快速和肮脏的例子）：
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;
}
}
});
