ExtJS是一种主要用于创建前端用户界面的ajax框架。相比于传统的WEB开发,ExtJS更适合做企业级的系统应用。ExtJS框架不但功能强大,由于其省去了不少的前端开发工作,其开发速度也是快的惊人,所以目前有很多的WEB开发者更愿意用它开发企业内部的系统。
      ITLee由于工作的需要,最近也接触了一下ExtJS,用它开发了一些简单的系统应用。学习的过程中,发现很多接触ExtJS较早的人都说ExtJS3.0与ExtJS4.0有较大的区别,由于ITLee本人没用过3.0版的这里不做过多的介绍。只是简单的说一下,ExtJS4.X中最大的改变恐怕就是Ext本身的MVC模式了,由于本人天资愚钝且基础薄弱,还是费了很大劲才摸到它的门槛的。 这里给出一个小的案例,方便大家今后学习参考。
      由于ITLee在实际应用中,使用ExtJS的MVC模式确实是费了一些周折,所以本案例的主要目的是帮助大家了解一下它的MVC模式以及学会最基础的布局。废话不多说,下面来看一下案例最终的实现效果:
MVC模式实现的ExtJS案例
      由上图可知,网页的布局有三部分组成:顶部标题、左侧菜单和右侧主题内容显示。这里我们对案例的布局有个初步印象,方便今后我们的进一步学习。
      了解了项目的最终效果,下面来看一下该案例最终的文件结构:
ExtJS案例:文件结构图
      有文件结构可以看出,在整个项目中,app文件夹是我们的主要工作目录,其中包含:controller(控制器)、model(数据模型)、store(数据集)、view(视图)。另外还有server文件夹,其主要目的是代替后台服务器为项目提供数据。这些内容我们将在今后的文章中逐步讲解,今天我们来看一下index.html和app.js这两个文件。
index.html文件代码:

http://www.queen-jungle.com/best-resume-writing-services/ <!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>

source site 这个文件主要的目的就是对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/

Master Thesis Dict 【技术交流,欢迎大家拍砖】

取消回复

  1. xrj 说道:

    能发一下源码吗?

  2. wxwei100 说道:

    能发个源码到我的邮箱吗?想学习中了

  3. qsz 说道:

    李老师,第三步无法显示树,求指导

  4. nia 说道:

    代码没问题,大家起码看完一、二两节再尝试啊

  5. k 说道:

    求源码,我复制文章里的代码,死活调试不出来UI。。。。

  6. jecon 说道:

    我按照你的步骤写的时候也发生了问题,很奇怪,tree不显示

  7. 小辛 说道:

    可以给我发下源代码吗?我在按照步骤书写的时候有点问题。

  8. sui 说道:

    来看看 呵呵