2010-12-28 10 views
5

Ext Jsでは、いくつかのボタンがリンクのように動作するようにしたい(例:<a href...)。Ext Js:リンクを作成する

どうすればいいですか?

今はwindow.location.href=http://....のハンドラーを追加しています。

しかし、私は、メニュー項目のようにhref属性を追加するような簡単な方法があるはずだと考えました。

いくつかのアイデア?

+0

私が知る限り、それは実際にやるべきことです。 – Mchl

+0

ExtJS Modern 6.x(6.5)については、https://stackoverflow.com/questions/47494458/extjs-6-x-modern-button-as-a-link/47519792#47519792 –

答えて

7

あなたが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>&#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; 
     } 
    } 
}); 
+0

をご覧ください。なぜ、それはメニュー項目のようなものではないのですか?(ユーザーが移動すると、ステータスバーでリンク先を見ることができます) – flybywire

+0

これはExtJS 4では機能しません; ExtJS4で機能するように変更するのは難しいでしょうか? –