ExtJS學習：MVC模式案例（二）

文章目錄

• 定義ViewPort
• 定義一個控制器

      在ExtJS案例系列教程的第一講中我們對案例有了一個整體的認識，瞭解了案例最終的效果以及最終的檔案結構，簡單的認識了index.html檔案，詳細的分析了app.js檔案的作用以及檔案當中的主要步驟。這篇文章是我們系列教程的第二講，主要講解ExtjS架構怎麼使用MVC模式對代碼進行布局。
      到目前為止我們現有的檔案只有根目錄下的index.html和app.js兩個檔案，不具有任何的實際意義。下面我們開始著手建立我們的項目，讓它能夠實實在在的展現在我們的瀏覽器中。首先，我們在根目錄下建立app檔案夾，然後在app檔案夾下建立controller和view兩個檔案夾，分別存放我們的控制器檔案和視圖檔案。

定義ViewPort

      VeiwPort代表整個瀏覽器顯示地區，該對象渲染到頁面的body地區，並會隨著瀏覽器顯示地區的大小自動改變，一個頁面中只能有一個ViewPort 執行個體。下面我們在view檔案夾中建立Viewport.js檔案，然後添加如下代碼：

/**     *檔案名稱：Viewport.js *說明：對網頁整體布局 *來源：ITLee部落格 *地址：http://www.itlee.name */Ext.define('Demo.view.Viewport', {    extend: 'Ext.container.Viewport',    //布局方式    layout: 'border',    items: [{        title:'ExtJS案例',        collapisble: true,        region:'north',        height: 100,        html: '<br><center><font size=5>MVC模式實現的ExtJS案例</font><br><font size=2>源碼來源:ITLee部落格</font></center>'    },{        title: '功能菜單',        region: 'west',        width: 180,        split: true,        collapisble: true,        html:'這裡是菜單'    }, {        id: 'mainContent',        title: '主題內容顯示',        layout: 'fit',        region: 'center',        collapisble: true,        contentEl: 'contentIframe'    }]});

      在Viewport中我們用border的布局方式將整個網頁分為三個部分：頭部（north）、左部（west)、主題部分（center）。

定義一個控制器

      控制器是整個應用程式的關鍵，他負責監聽事件，並對某些時間做出相應的動作。現在我們在controller檔案夾下建立一個控制器，命名為demoController.js（這裡的命名應該與app.js檔案中載入的控制器名稱相同），然後我們為該檔案添加以下代碼：

Ext.define('Demo.controller.demoController', {    extend: 'Ext.app.Controller',        //將Viewport.js添加到控制器    views: ['Viewport']});

在控制器中我們通過views配置項，將所需視圖載入到控制器中。現在我們通過瀏覽器就可以對項目進行查看了，查看效果如下：

 

至此，我們對網頁的布局就算是完成了，希望對大家有所協助。下一講我們將講解樹形菜單的實現。

文章來源：ITLee部落格

原文地址：http://www.itlee.name/qianduan/extjs/472.html/