ゼロから学ぶSencha Touch MVC応用の4

テストの準備をします!Webkitベースのブラウザでindexを開きます.htmlファイルには、情報ボックスの表示が表示されます.≪ビューの作成|Create View|emdw≫:データのレンダリングと表示を担当するSencha Touchコンポーネントを拡張する方法でビューを作成できます.このテクノロジーを使用すると、アプリケーションを非常にクールに見ることができます.メインビューの作成:Viewportアプリケーションを実行するときに作成しなければならない最初のビューはViewportです.これは私たちのメインビューです.このビューでは他の試みの描画を行い、キャンバスとして想像することができます.私たちのapp/viewsディレクトリの下で、Viewポートを作成します.jsファイル、およびファイルに次の内容を追加します.

App.views.Viewport = Ext.extend(Ext.Panel, {
         fullscreen: true,
         layout: 'card',
         cardSwitchAnimation: 'slide',
         dockedItems: [
                 {
                          xtype: 'toolbar',
                          title: 'MvcTouch',
                 },
         ],
});

viewには何がありますか?
Appでビューを作成します.Viewsでは,登録メカニズムを適用することで自動的にネーミングスペースを生成する.我々のビューは既存のコンポーネント/クラス(component/class.)になります.のサブクラスで、Ext.extendという機能に2つのパラメータを渡すことで、これらのビューを作成します.この2つのパラメータは、スーパークラス(拡張したいクラス)と属性と機能を追加するオブジェクトです.
我々のビューでは、拡張パネルパネルパネルクラスを選択し、すべての空間を利用するためにフルスクリーン(fullscreen)プロパティをtrueに設定します.レイアウトプロパティ(layout)は「card」に設定され、1つのサブコンポーネントだけが同じ時間に可視になるようにします.カードスイッチアニメーション「cardSwitchAnimation」が「slide」の場合、すべてのサブコントロールが画面にどのように表示されるかが処理されます.
最後のプロパティについては、「コンポーネントまたは一連のコンポーネントがPanelエントリとして追加され、上部、右部、左部、または下部に、ツールバーやTabバーのようなものの典型的な使用方法である.
xtypeが何であるかを示さない場合は、このドキュメント(this)の内容を参考にする必要があります.
次に、viewportのアプリケーションでのlaunch起動機能を例示する必要があります.

launch: ()
{
         this.viewport = new App.views.Viewport();
},

viewportインスタンスのアプリケーションプロパティを割り当てて、後続のコントローラでアクセスできるようにします.アクセス方法はthisです.application.viewport.
テスト前に完了した作業は、indexにビューファイルを含める必要があります.htmlでは、以下は視の説明です.

< type="text/java"src="/app/views/Viewport.js">
テストできるようになりました!テストの結果は、次のインタフェースを参照してください.
コントローラの特定のビューを作成する
特定のコントローラが使用するビューについては、新しいディレクトリを作成し、コントローラ(小文字)contollerと名付けてapp/viewsディレクトリに追加するので、app/viewsにhomeディレクトリを作成し、HomeIndexViewを作成します.jsファイル.indexでhtmlにはこれらのファイルが含まれています.