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/