ExtJSの4のマウスの右クリックイベント関数でカスタムメニューを作成する方法は、事前にバージョンと少し異なっています。 それはExt 4.0.2でそれらはイベント名と引数の順序を変更したと思われる。
まず、Extの3メニューを作成する方法を見てみましょう。 私はからこの例を得るaditiaラーマン ：
VAR MENU1 =新しいExt.menu.Menu（{ アイテム：[ { テキスト： "私はExtのように 'を、 チェック：本当 }、 ' - '、{ テキスト： 'で開く "、 メニュー：{ アイテム：[{ テキスト： "メモ帳+ + ' }、{ テキスト： "GIMP 2.0" }、{ テキスト： 'Firefoxの }] } }、 ' - '、{ テキスト： "カット" }、{ テキスト： 'コピー' }、{ テキスト： '削除' }、 ' - '、{ テキスト： '名前の変更 " } ] }）;
リスナーを追加するには、DataViewを書き込みましょう。
VAR datav =新しいExt.DataView（{ 自動スクロール：trueの場合、ストア：ストア、TPL：TPL、 autoHeight：falseの場合、高さ：250は、MultiSelect：trueの場合、 上部階層： 'X - ビュー - オーバー'、itemSelector： 'div.thumbラップ "、 emptyText： '表示する画像はありません'、 スタイル： '国境：1px固体＃99BBE8;' リスナー：{ レンダリング：{ FN：関数（）{ Ext.getBody（）（ "コンテキストメニュー"で、Ext.emptyFn、 nullの場合、{のpreventDefault：真}）; } } ContextMenuを{ FN：関数（objは、インデックスノード、イベント）{ X = event.browserEvent.clientX。 Y = event.browserEvent.clientY。 menu1.showAt（[X、Y]）; } } } }）;
データビューは、それが正しいWebブラウザのメニューをクリックして、これはリスナーに "レンダリング"イベントと "contexmenu"イベントで呼び出されるデフォルトを無効にしてレンダリングされるときに右クリックのマウスイベントを検出するためのものであり、マウスカーソルの位置を捕捉し、メニューが表示されます。
それは簡単な権利ですか？ 今度は、ExtJSの4 MVCの右クリックメニューを作成してみましょう。
1。 フォルダビュー "アプリ/ビュー/ MenuRight.js 'にメニューを追加
Ext.define（ 'PG.view.MenuRight'、{ 拡張： 'Ext.menu.Menu'、 アイテム：[ { テキスト： "私はExtのように 'を、 チェック：本当 }、 ' - '、{ テキスト： 'で開く "、 メニュー：{ アイテム：[{ テキスト： "メモ帳+ + ' }、{ テキスト： "GIMP 2.0" }、{ テキスト： 'Firefoxの }] } }、 ' - '、{ テキスト： "カット" }、{ テキスト： 'コピー' }、{ テキスト： '削除' }、 ' - '、{ テキスト： '名前の変更 " } ] }）;
2。 コントローラファイルにリスナーを追加する
INIT：関数（）{ this.control（{ 'alias_name_here'：{ レンダリング：関数（）{ Ext.getBody（）の（ "コンテキストメニュー"、Ext.emptyFnは、null、{preventDefaultを：TRUE}）; } itemcontextmenu：関数（グリッド、レコード、項目、インデックス、イベント）{ X = event.browserEvent.clientX。 Y = event.browserEvent.clientY。 VARメニュー=新しいPG.view.MenuRight（）; menu.showAt（[X、Y]）; / * / /ここにメニューを作成する代わりに追加したい場合 ビューのフォルダ内の/ /メニューは、次のコードを使用することができます event.stopEvent（）; VARメニュー= Ext.create（ 'Ext.menu.Menu'、{ アイテム：[{ テキスト： '表示名'、 ハンドラ：関数（）{ アラート（record.get（ '名前'））; } }、{ テキスト： '表示するID'、 ハンドラ：関数（）{ アラート（record.get（ 'user_id'と））; } }] }）; menu.showAt（event.xy）; * / } } }）;
