ExtJS学习:MVC模式案例(一)

 ExtJS是一种主要用于创建前端用户界面的ajax框架。相比于传统的WEB开发,ExtJS更适合做企业级的系统应用。ExtJS框架不但功能强大,由于其省去了不少的前端开发工作,其开发速度也是快的惊人,所以目前有很多的WEB开发者更愿意用它开发企业内部的系统。

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


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

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

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

1 Ext.onReady(function(){
2     //开启悬浮提示功能
3     Ext.QuickTips.init();
4     //开启动态加载
5     Ext.Loader.setConfig({
6         enabled: true
7     });
8     //创建应用程序的实例
9     Ext.application({
10         //设定命名空间
11         name: 'Demo',
12         //指定配置选项,设置相应的路径
13         appFolder: 'app',
14         //加载控制器
15         controllers: ['demoController'],
16         //自动加载和实例化Viewport文件
17         autoCreateViewport: true
18     });
19 });
  app.js文件可以看成是对我们整个项目的全局设置,其中我们需要注意的有:
      (1)Ext.Loader.setConfig帮我们开启了自动加载的功能,这个功能默认是不开启的,需要我们手动开启,否则以后开发的很多文件都会找不到,报以下错误:
自动加载未开启报错信息
      (2)name: ‘Demo’给项目规定了一个命名空间,它将作为一个全局变量应用于整个项目中,帮助我们识别属于本项目的应用文件。
      (3)appFolder: ‘app’这个配置项,帮我们指定到app文件夹中。
      至此,我们对案例已经有了一个整体的认识。下一讲我们将会详解项目的整体布局。


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值