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

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

定義ViewPort

      VeiwPort代表整個瀏覽器顯示區域，該對象渲染到頁面的body區域，並會隨着瀏覽器顯示區域的大小自動改變，一個頁面中只能有一個ViewPort 實例。下面我們在view文件夾中創建Viewport.js文件，然後添加如下代碼：

1	Ext.define('Demo.view.Viewport', {

2	extend: 'Ext.container.Viewport',

3	//佈局方式：border

4	layout: 'border',

5

items: [{

6	title:'ExtJS案例',

7	collapisble: true,

8	region:'north',

9	height: 100,

10	html: '<br><center><font size=5>MVC模式實現的ExtJS案例</font><br><font size=2>源碼來源:ITLee博客</font></center>'

11

},{

12	title: '功能菜單',

13	region: 'west',

14	width: 180,

15	split: true,

16	collapisble: true,

17	html:'這裏是菜單部分'

18

}, {

19	id: 'mainContent',

20	title: '主題內容顯示',

21	layout: 'fit',

22	region: 'center',

23	collapisble: true,

24	contentEl: 'contentIframe'

25

}]

26

});

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

定義一個控制器

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

1	Ext.define('Demo.controller.demoController', {

2	extend: 'Ext.app.Controller',

3	//將Viewport.js添加到控制器

4	views: ['Viewport']

5

});

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

      至此，我們對網頁的佈局就算是完成了，希望對大家有所幫助。下一講我們將講解樹形菜單的實現。
      歡迎各位留言糾錯，共同進步！

如非特殊說明，文章均爲ITLee原創，轉載請註明！
原文地址： http://www.lihuai.net/qianduan/extjs/472.html/