ExtJSに初めて慣れたとき、そのような大きなWeb開発フレームワークには、ユーザーインターフェイスでハイパーリンクを使用する手段が含まれていないこと（少なくともボタン、パネル、および実装可能なその他のより複雑なコントロールは含まれていません）何でも）。 よくあることですが、複雑なことを簡単に行うフレームワークは、予期しない場所で問題を引き起こします。
もちろん、Ext.Element（dom要素のクロスブラウザーラッパー）を使用すると、実行時にHTMLフラグメントを挿入できますが、他のコントロールをツールバー、パネル、または他のコンテナーに挿入できる柔軟性と容易さは実現されます難しい。
そして最近、あるアプリケーションのプロトタイプを作成しているときに、「偶然」そのようなコンポーネントを作成しました。 それは非常に単純ですが、私には、多くの人が生活を楽にすることができるようです。
以下はそのコードと簡単な分析です。
Custom.Hyperlink = Ext.extend(Ext.BoxComponent, { constructor: function (config) { config = config || {}; Ext.apply(this, config); Custom.Hyperlink.superclass.constructor.call(this, config); this.on('afterrender', this.createHref, this); this.addEvents('clicked'); }, hrefTpl: '<a href="#" onclick="Ext.getCmp(\'{0}\').notifyClicked(); return false;">{1}</a>', createHref: function () { var tpl = new Ext.Template(this.hrefTpl), html = tpl.apply([this.getId(), this.text]); this.el.update(html); }, notifyClicked: function () { this.fireEvent('clicked', this); } } ); Ext.reg('hyperlink', Custom.Hyperlink);
このようなハイパーリンクは、他の標準コンポーネントと同じ方法でコンテナに追加されます。 環境との相互作用は、通常のイベント指向スタイルで行われます。
リンクは事前定義されたdom idに関連付けられていませんが、リンクのonclickで呼び出されたメソッドが正しいコンポーネントに代わって呼び出されることは構文的に保証されています（ご存知のように、メソッドmethodをA.method（）の形式で呼び出す場合、 Aを指す）
以下は、このようなコンポーネントの使用例です。
Custom.SearchPanel = Ext.extend(Ext.Panel, { initComponent: function () { Ext.apply(this, { … //skipped tbar: [{ xtype: 'hyperlink', text: 'Show advanced', listeners: { scope: this, clicked: this.showAdvancedForm } } ] } ); Custom.SearchPanel.superclass.initComponent.call(this); }, showAdvancedForm: function () { Ext.Msg.alert('Clicked!'); } } );
理想的には、ハイパーリンクの場合、textプロパティを設定するときにHTMLで安全でない文字のエスケープを有効または無効にできる必要があります。 これは、標準のExt.util.Format.htmlEncode（）関数を使用して簡単に実行されます。 この改善を読者に小さな演習として提供します。