從零開始學習Sencha Touch MVC應用之四

現在準備測試！

在基于webkit的浏覽器中，打開index.html檔案，你将看到資訊框的顯示。

建立視圖：

我們的視圖可以用擴充Sencha Touch元件的方式來建立，它們負責資料的渲染和展示，采用這種技術可以使我們的應用看起來非常酷。

建立主視：Viewport

當我們運作應用時，我們必須建立的第一個視圖是Viewport，這個是我們的主要視圖，在這個視圖中我們将會進行其他試圖的描繪，你可以把它想象為畫布。

在我們的app/views目錄下，建立一個Viewport.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這個功能來建立這些視圖。這兩個參數是：超類（我們想擴充的類）和我們将添加屬性和功能的對象。

對于我們的視圖，我們選擇擴充面闆Panel類，并且設定一些屬性：全屏（fullscreen）屬性為true以便利用所有的空間；布局屬性（layout）設定為“card”,使隻有一個子元件在同一時間内是可視的；卡片開關動畫“cardSwitchAnimation” 為“slide”将處理所有子控件怎樣在螢幕上進行顯示。

關于最後的一個屬性:泊位Items（DockedItems）,Sencha touch文檔中是這樣描述的：“一個元件或一系列元件作為泊位條目被添加到Panel，泊位的條目可以泊位到頂部、右部、左部或底部，這是像工具條（toolbars）和Tab條之類的東西的典型的使用方式。

如果不緻到xtype是何種東西，你需要參考這裡文檔（this）的内容。

現在我們需要例示說明viewport在我們的應用的launch啟動功能：

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

我們配置設定viewport執行個體給我們的應用屬性，以使我們在後續的控制器中通路它，通路方式為：this.application.viewport.

到測試前為止我們所完成的工作，我們需要把視圖檔案包含到index.html中，下面是視的說明：

<!-- VIEWS -->

< type="text/java" src="/app/views/Viewport.js"></>

現在我們可以測試了！你測試的結果應當看到下面的界面：

建立一個控制器的特定視圖

對于特定的控制器使用的視圖，我們将建立新目錄，命名為控制器（小寫）contoller，在app/views目錄添加他們，是以，建立一個home目錄在app/views中，并且在裡面建立HomeIndexView.js檔案。在index.html中包含進這些檔案。

轉載于:https://my.oschina.net/fanyongqiang/blog/654460