Ext Jsでは、いくつかのボタンがリンクのように動作するようにしたい(例:<a href...
)。Ext Js:リンクを作成する
どうすればいいですか?
今はwindow.location.href=http://....
のハンドラーを追加しています。
しかし、私は、メニュー項目のようにhref属性を追加するような簡単な方法があるはずだと考えました。
いくつかのアイデア?
Ext Jsでは、いくつかのボタンがリンクのように動作するようにしたい(例:<a href...
)。Ext Js:リンクを作成する
どうすればいいですか?
今はwindow.location.href=http://....
のハンドラーを追加しています。
しかし、私は、メニュー項目のようにhref属性を追加するような簡単な方法があるはずだと考えました。
いくつかのアイデア?
正確にこれを行う既存のuser extensionもあります。
あなたがExt.ux.LinkButton
(または何でも)へExt.Button
を拡張し、プロパティと、この拡張クラス(ただquick- & -dirty例)で、必要な動作を実装することができ、よりポータブルにするために...行うの方法です:
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:外観の
簡単な変更:
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;
}
}
});
をご覧ください。なぜ、それはメニュー項目のようなものではないのですか?(ユーザーが移動すると、ステータスバーでリンク先を見ることができます) – flybywire
これを実行するには、ボタン要素のレンダリングをオーバーライドして、実際に ' '-trefに' href'属性を付けてください。これはあまり複雑すぎるべきではありません。上記の私の編集を参照してください(これはテストされておらず、ソリューション全体ではありませんので注意してください)... –
これはExtJS 4では機能しません; ExtJS4で機能するように変更するのは難しいでしょうか? –
私が知る限り、それは実際にやるべきことです。 – Mchl
ExtJS Modern 6.x(6.5)については、https://stackoverflow.com/questions/47494458/extjs-6-x-modern-button-as-a-link/47519792#47519792 –