Extjs4快速上手二——基础知识(二)

　　事隔几天继续开写，由于水平所限理论的东西写起来的确很费劲，现在就将就着写吧，等后边的实践部分或许会好点。今天主要讲讲Extjs4的MVC。

1.1 谈谈MVC

　　MVC，这个概念或许算是当下最流行的设计模式，java中的SSH、SpringMVC，.net的MVC框架，php的smarty等，哪门语言不来个MVC框架都不好意思说自己是主流的。下边是贴过来的一些MVC介绍。

　　MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用于组织代码用一种业务逻辑和数据显示分离的方法，这个方法的假设前提是如果业务逻辑被聚集到一个部件里面，而且界面和用户围绕数据的交互能被改进和个性化定制而不需要重新编写业务逻辑MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。

　　简单地说，采用MVC主要的目的是使数据（M）和视图（V）分离，经过拓展后三部分的完成的任务如下：

　　Model：定义数据模型和业务规则，通常业务处理都放在这一层处理。如SSH中的model、dao和service。

　　View：视图是用户看到并与之交互的界面。如jsp、html。

　　Controller：控制器接受用户的输入并调用模型和视图去完成用户的需求。包括数据处理和视图跳转等，最典型的就是SSH中的struts了。

　　那么MVC能带来什么好处呢？松耦合、便于重用、易于维护和拓展......。当然目前我唯一体会到的就是能使项目结构清晰，便于开发。

1.2 Extjs中的MVC

　　Extjs的MVC其实和上边所介绍的并不完全符合，而且它的实现方式比较死板（当然死板有死板的好处，那就是你不用费心思再去设计结构了），下边我们来详细介绍。

　　上边是Extjs MVC的典型目录，红色是必须建立的，各文件（夹）作用如下：

app　　　　　　　　　　　　　　　　//根目录
   controller　　　　　　　　　　//存放控制类的js,这里的controller除了完成一般MVC中C的任务外，所有的业务也是在这层完成
   model　　　　　　　　　　　　　//定义数据结构
　 store　　　　　　　　　　　　　//一个实例化的model集合,一般用来装载列表等数据
　 view　　　　　　　　　　　　　 //不用多说，所有的视图组件都放这儿就行
app.js　　　　　　　　　　　　　　//MVC的入口，内部调用Application类（即Ext的main），并加载controller

　　有人就说了，不就是按文件夹把文件分类吗？如果仅仅如此Ext开发者也不好意思提出这个模式了。它做到的远远不止如此。按照这样建立以后，Ext将自动按照目录形成一个命名空间，而我们定义js类直接可以按照java中的包那样进行访问。可以先看一下app.js的一个例子：

Ext.Loader.setConfig({enabled: true});  　　　　//启用动态加载，可以让js文件在需要用的时候再加载
Ext.application({
    name:'sxpt',　　　　　　　　　　　　　　　　　　//根命名空间
    autoCreateViewport: true,　　　　　　　　　　 //自动创建Viewport，如不指定则需自己指定一个Viewport
    appFolder:'manager/app',　　　　　　　　　　　//指定app根文件位置，其内文件将按命名空间访问，如view/admin下的某视图XX.js可访问admin.XX即可,Extjs会自动将其定位　　　　　　　　　　　　　　　　　　　　　　　　　　　　 到view文件加下
    controllers:[　　　　　　　　　　　　　　　　　 //制定要加载的控制器
        'Menu','admin.Student','admin.Teacher','admin.Project'
    ]
});

　　如代码中注释所言，建立好MVC模式之后，我们只需将对应的文件放入对应文件夹，而且相互之间引用直接使用命名空间即可，而不用指定文件夹，这样可以使js类结构更清晰，更符合面向对象编程。

　　最后我们应该如何启动MVC呢？很简单，只需在普通的页面里边引入即可，项目中是在main.jsp引入的，我们直接访问main.jsp，Extjs就会自动加载。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>实训管理平台</title>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="ext/ext-all.js"></script> 
    <script type="text/javascript" src="manager/app.js"></script> 
  </head>
  
  <body>
  </body>
</html>

　　最后来个效果图吧：

posted @ 2013-04-07 00:38 oO脾气不坏Oo 阅读(2078) 评论(3) 编辑收藏举报

刷新页面返回顶部

oO脾气不坏Oo

Extjs4快速上手二——基础知识(二)

公告