Ext JSをベースにしたデスクトッププロジェクトで、ボタン表示のコンポーネントは、Menuコンポーネントを追加し、Menuコンポーネントにメニュー項目を追加することで、メニューに変換することができます。Sencha Touch 2.3.0 以降で提供されている Menu コンポーネントを使用できる Architect の Touch ベースのプロジェクトに、類似のテクニックが適用されています。また Touch では、オーバーレイとして追加されたシートビューコンポーネントのボタンを配置できます。
このガイドはArchitectでExt JSのプロジェクトでメニューを構築するための基本的な手順を説明します。異なるコンポーネントを使用しますが、Touchのプロジェクトで同じ技術を使用することができます。メニューが含まれる Architect プロジェクトの例は、ExtFeedViewer を参照してください。
ツールバー、ボタン、メニューの作成
ArchitectでExt JSプロジェクトを開き、Toolbarをキャンバスへドラッグし、Toolbarに各メニューのボタンをドラッグして、一般的なメニューバーを作成します。必要であればさらに追加することも可能ですが、ここでは２つのボタンからメニューの構築を始めます。
次に、各メニューの名前として、たとえばMyAppやToolsのようなボタンのラベルをセットします。それぞれのボタンにMenuコンポーネントを追加し、２つのメニュー項目を追加します。これを行うには、ボタンのFlyout Configボタンをクリックし、Addを選択してMenuコンポーネントを追加します。また、これにより自動的にMenuにMenu Itemを追加します。メニューに２つめの項目を追加する場合、Addを再びクリックします。ボタンの上にメニューをドラッグすることでも同じことができます。 メニュー項目、チェックアイテム、セパレータ、テキスト項目も同様に可能です。
次に、メニューで表示するメニューアイテム名を与える、各アイテムのdisplayNameとtext設定を設定します。たとえば、MyAppメニューにはAboutやPreferences、ToolsメニューにはImportやExportなどです。ここでキャンバスとインスペクタを見てみると、このように見えるはずです。
コントローラとインタラクティビティの追加
次に、ユーザーがメニュー項目を操作したときに、メニュー項目に何かをさせる必要があります。プロジェクトにコントローラを追加し、次のように設定します。
インスペクタで先ほど追加したコントローラを選択し、Actionが見つかるまでConfigパネルを下へスクロールさせます。右の追加ボタン(“+”) をクリックし、Controller Actionを選択します。
Architectは“choose a target type”と促すので、これによりコントローラはどこでイベントをリッスンするかを認識します。ターゲットのリストを開くには、空のフィールドの右側にある矢印をクリックします。Ext.menu.Itemが見つかるまでリストを下へスクロールさせ、それを選択します。これでコントローラはメニュー項目に作用するイベントを認識するようになりました。
次に、Architectはコントローラのアクションに対応するイベントを選択するよう促します。空のフィールドの横にある矢印をクリックしてイベントのリストを開き、下にスクロールして click を選択するか、または、フィールドに click と入力してリターンを押します。インスペクタはコントローラ下に“click”と呼ばれるアクションを含んでいることに注意してください。ConfigでController Actionを開くと、controlQuery、fn、targetTypeのプロパティの設定を見ることになります。
ここで、Controller Actionに、先ほど加えられたイベントにシンプルなアラートを表示するだけのコードを追加します。[Project Inspector（プロジェクトインスペクタ）] でアクションを選択してからキャンバス上の Design/Code 切り替えボタンをクリックするか、[Project Inspector（プロジェクトインスペクタ）] 上でアクションをダブルクリックして、コードエディタを開きます。エディタで次のコードを入力します。
Ext.Msg.alert('Menu Example', 'MenuItem Clicked!');コントローラを選択し、views設定を探し、コントローラにビューを結びつけます。値が空のフィールドをクリックし、唯一表示されるMyToolbarを選択します。それを選択し、表示されるダイアログボックスでKeepをクリックします。
Controller Referenceを追加して設定します。インスペクタでコントローラを選択して、References設定を探してください。右にある追加ボタン (“+”) をクリックします。Architect の求めに従い、参照名に MyToolbar、セレクタに #MyToolbar を入力します。
注意：コンポーネント毎に固有のアクションを指定する場合や、コントローラを使用するよりもコンポーネントにイベントを追加することに慣れている場合は、ボタンビューコンポーネントに直接イベントバインディングを追加できます。ただし、MVC パラダイムのメリットを最大限に引き出すため、インタラクティブ操作を実装する際には、コントローラを利用することをお勧めします。
Architectにインタラクティビティ機能を追加する方法の詳細については、イベントとコントローラ：インタラクティビティの追加を参照してください。
メニュービューコンポーネントのその他の使用方法
最上位のコンポーネントとしてMenuをキャンバスに直接ドラッグし、コンテキストメニューを作成することができます。コントローラアクションからイベントを選択した後、コンテキストメニューを表示するには次のようなコードを使用します。
var contextMenu = Ext.create('MyApp.view.ContextMenu');
contextMenu.showBy(button);同様に、Menuコンポーネントは他のコンテナに追加することができます。この場合、コントローラはユーザーのコンテナ上での右クリックをリッスンし、これをトリガーにしてメニューを開きます。パラメータでコンポーネントを取るshowByメソッド（上で書かれているbutton）は、これを行うために特に有用です。
Touchプロジェクトでのメニュー
Sencha Touch 2.3.0 以降では Ext.menu.Menu コンポーネントが追加されています。また、任意のコンポーネント – たとえばシート（Ext.Sheet）– をオーバーレイし、メニュー項目となる ボタンコンポーネント（Ext.Button）を追加できます。このボタンにインタラクティブ性を追加するには、上記と同じように、ユーザーのアクションをリッスンしてレスポンスするコントローラを追加して設定します。