ExtJS学习：MVC模式案例（一）

最新推荐文章于 2016-07-14 10:13:40 发布

Sychel

最新推荐文章于 2016-07-14 10:13:40 发布

阅读量1.1k

点赞数

分类专栏： Extjs 文章标签： EXT MVC extjs

Extjs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这里感谢http://www.lihuai.net的李坏老师，这篇文章是他的原创，转载过来希望能让更多需要帮助的人看到。

ExtJS是一种主要用于创建前端用户界面的ajax框架。相比于传统的WEB开发，ExtJS更适合做企业级的系统应用。ExtJS框架不但功能强大，由于其省去了不少的前端开发工作，其开发速度也是快的惊人，所以目前有很多的WEB开发者更愿意用它开发企业内部的系统。
      ITLee由于工作的需要，最近也接触了一下ExtJS，用它开发了一些简单的系统应用。学习的过程中，发现很多接触ExtJS较早的人都说ExtJS3.0与ExtJS4.0有较大的区别，由于ITLee本人没用过3.0版的这里不做过多的介绍。只是简单的说一下，ExtJS4.X中最大的改变恐怕就是Ext本身的MVC模式了，由于本人天资愚钝且基础薄弱，还是费了很大劲才摸到它的门槛的。这里给出一个小的案例，方便大家今后学习参考。
      由于ITLee在实际应用中，使用ExtJS的MVC模式确实是费了一些周折，所以本案例的主要目的是帮助大家了解一下它的MVC模式以及学会最基础的布局。废话不多说，下面来看一下案例最终的实现效果：

      由上图可知，网页的布局有三部分组成：顶部标题、左侧菜单和右侧主题内容显示。这里我们对案例的布局有个初步印象，方便今后我们的进一步学习。
      了解了项目的最终效果，下面来看一下该案例最终的文件结构：

      有文件结构可以看出，在整个项目中，app文件夹是我们的主要工作目录，其中包含：controller（控制器）、model（数据模型）、store（数据集）、view（视图）。另外还有server文件夹，其主要目的是代替后台服务器为项目提供数据。这些内容我们将在今后的文章中逐步讲解，今天我们来看一下index.html和app.js这两个文件。
index.html文件代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ExtJS学习：MVC模式案例</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../extjs/examples/shared/example.css" />
<script type="text/javascript" src="../extjs/bootstrap.js"></script>
<script type="text/javascript" src="../extjs/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<iframe id='contentIframe' name='contentIframe' style='height:100%;width:100%' frameborder="no"></iframe>
</body>
</html>

这个文件主要的目的就是对ExtJS框架文件的引用，这里我们不做过多的介绍。
app.js文件代码：

Ext.onReady(function(){
	//开启悬浮提示功能
	Ext.QuickTips.init();
	//开启动态加载
	Ext.Loader.setConfig({
		enabled: true
	});
	//创建应用程序的实例
	Ext.application({
		//设定命名空间
		name: 'Demo',
		//指定配置选项，设置相应的路径
		appFolder: 'app',
		//加载控制器
		controllers: ['demoController'],
		//自动加载和实例化Viewport文件
		autoCreateViewport: true
	});
});

      app.js文件可以看成是对我们整个项目的全局设置，其中我们需要注意的有：
      （1）Ext.Loader.setConfig帮我们开启了自动加载的功能，这个功能默认是不开启的，需要我们手动开启，否则以后开发的很多文件都会找不到，报以下错误：

      （2）name: ‘Demo’给项目规定了一个命名空间，它将作为一个全局变量应用于整个项目中，帮助我们识别属于本项目的应用文件。
      （3）appFolder: ‘app’这个配置项，帮我们指定到app文件夹中。
      至此，我们对案例已经有了一个整体的认识。下一讲我们将会详解项目的整体布局。
      欢迎各位浏览纠错，共同交流！

如非特殊说明，文章均为ITLee原创，转载请注明！
原文地址： http://www.lihuai.net/qianduan/extjs/457.html/

Sychel

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJS学习：MVC模式案例（一）

这里感谢http://www.lihuai.net的李坏老师，这篇文章是他的原创，转载过来希望能让更多需要帮助的人看到。 ExtJS是一种主要用于创建前端用户界面的ajax框架。相比于传统的WEB开发，ExtJS更适合做企业级的系统应用。ExtJS框架不但功能强大，由于其省去了不少的前端开发工作，其开发速度也是快的惊人，所以目前有很多的WEB开发者更愿意用它开发企业内部的系统。
复制链接

扫一扫