1.Ext.js的mvc开发模式

  在ext.js4.0以后引入mvc开发模式,将js分成model-view-controller三层,使得大量js代码变得更加易于维护和重用,这就是ext.jsmvc模式的初衷。

2.ext.js文件夹模式

  1>controller:所有的控制器

  2>view:所有的视图组件

  3>store:所有的储存数据源组件

  4>model:所有的数据模型组件

  5>自己定义组件和工具:data/lib/util

  view中会有一个viewport.js,这个东西就像一个骨架一样,上面可以拼装各种view,具体的说,就是各种布局形式和窗体控件,view界面的载体,一个页面只能有一个viewport。

  view是纯粹的界面组件(比如form ,grid ,window),通过store来加载数据并展示到界面上,界面控件的响应都写在controller里面,view对controller的存在一无所知,也没有代码上的依赖。

  controller的角色完全是个粘合剂,它在加载之初,会帮忙加载跟其有关的model,store,view类,而其真正的作用,是通过一系列的事件处理函数,确定每个view上面界面组件对用户交互行为的响应方法,可以说是一堆事件处理器函数的集合,这里面主要通过一个control成员函数来进行事件绑定,通过另一个叫componentquery的组件,使用类似css selector的语法来定位界面上的组件,并为其绑定事件处理器。

  Model是对抽象数据的具体化,简单理解就是数据库里面的一行记录。

  Store是对通过网络加载数据的过程的一个抽象,Store通过data发送请求(一般为ajax请求)到后台获取数据(一般返回json格式),Store依赖于Model,通过关联的Model对象才知道如何将取回的数据对象化。

3.ext.js的开发环境

  功能:加载样式表、核心库,app.js

  <script type="text/javascript" src="include-ext.js"></script>
  <script type="text/javascript" src="all-classes.js"></script>
  <script type="text/javascript" src="app.js"></script> app.js中加载单页面的唯一入口Ext.container.Viewport ,进入view,在加载控制器文件controllers

 

controller 控制器中加载各种组件---各种js文件(自己编写的js文件),但不加载Viewport组件。

当autoCreateViewport设置为true时表示框架自动创建Viewport组件。

 
  

ext.js的mvc的更多相关文章

  1. ext.js的mvc开发模式详解

    ext.js的mvc开发模式详解和环境配置 在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开 ...

  2. Ext.js 之MVC

    Ext.js 4.0之MVC

  3. [Ext JS 4] MVC 应用程序框架

    前言 大型客户端应用程序总是很难编写,很难组织和很难维护.随着功能的增加和更多的开发人员加入项目,对项目的控制也越来越困难了.Ext JS 4 提供了一个新的应用程序框架帮助组织代码. 模型 - 一组 ...

  4. 2017年第1贴:EXT.JS使用MVC模式时,注意如何协调MODEL, STORE,VIEW,CONTROLLER的关系

    也调了快一天,死活找不到窍门. MODEL, STORE,VIEW的调置测试了很久,试了N种方法,不得其果. 最后,试着在APPLICATION里加入CONTROLLER, 在CONTROLLER里加 ...

  5. 【翻译】对于Ext JS 5,你准备好了吗?

    原文:Are You Ready for Ext JS 5? Ext JS 5:准备升级 对于Ext JS 5加入Sencha的大家庭,我们感到非常高兴!作为一个主要版本,在Ext JS 5引入了一堆 ...

  6. 新书《Ext JS 4.2实战》即将出版

    目录: 第1章    Ext JS 4概述1.1    从Ext JS 4.0到4.071.2    从4.1到4.1.1a1.3    从4.2到4.2.11.4    如何选择版本1.5    基 ...

  7. Ext.js细节:在MVC中处理Widget Column,GetCmp和ComponentQuery, Id和ItemId

    针对EXT.JS版本的演进,要不断的学习新的最佳实践方法. 比如,在定义组件时,尽管用itemid,而不是id. 在搜索组件时,尽量用ComponentQuery,而不是getCmp. 在MVC中处理 ...

  8. 【转】EXT JS MVC开发模式

    原文链接:EXT JS MVC开发模式 在app(亦即根目录)文件夹下面创建controller.model.store和view文件夹,从名称上就知道他们该放置什么代码了吧.然后创建Applicat ...

  9. sencha ext js 6 入门

    Sencha Ext JS号称是目前世界上最先进和最强大的.支持多平台多设备的JavaScript应用程序开发框架.首先看一下Ext JS的发展简史. 1 Ext JS发展简史 YUI-Ext的作者J ...

随机推荐

  1. vue.js在visual studio 2017下的安装

    1.打开"工具"菜单->"NuGet 包管理器"->"管理解决方案 Nuget 的程序包": 在红色标识的地方输入vue: 2. ...

  2. Gsoap编译

    gSOAP编译工具提供了一个SOAP/XML 关于C/C++ 语言的实现,从而让C/C++语言开发web服务或客户端程序的工作变得轻松了很多.gSOAP支持大多数平台,包括嵌入式系统和小系统. 你首先 ...

  3. IDEA 最新版破解教程图解

    一.打开此网站 http://idea.lanyus.com 并下载红色框框内的包 二.拷贝到idea 安装目录bin文件下 三.编辑 idea64.exe.vmoptions 和 idea.exe. ...

  4. MTK 自定义系统服务

    添加系统服务需要添加aidl,service,manager文件,需要修改SystemServer,Context,ContextImpl 下面举例进行说明,主要添加一个服务,用于获取系统时间和版本号 ...

  5. iOS开发-- 开发中遇到的问题汇总

    1. CUICatalog: Invalid asset name supplied: 今天写了加载图片,默认图片写的是[UIImage imageNamed:@""],之后就报下 ...

  6. [R]统计工具包

    Wilcoxon Rank Sum and Signed Rank Tests data <-read.csv('XX.csv') wilcox.test(data$value1, data$v ...

  7. Ubuntu 下 Sublime 无法输入中文?(已解决)

    在 Ubuntu 里安装了 Sublime 却不能输入中文? 这可不好. 怎么办呢? Follow Me! 1 获得 sublime-imfix.c 文件 有 GitHub 账号的,可以从 https ...

  8. 官方文档:Office VBA 参考

    https://docs.microsoft.com/zh-CN/office/vba/api/overview/    Office VBA 参考 https://docs.microsoft.co ...

  9. [原]openstack-kilo--issue(十二)openstack-keystone和httpd服务同时占用35357和5000

    本博客已经添加"打赏"功能,"打赏"位置位于右边栏红色框中,感谢您赞助的咖啡. == Keystone service == openstack-keyston ...

  10. SQL多结果集导出Excel

    由于本项目工作中需要,有时会导出一些数据给客户,但又不是每次都需要,可能这次用了下次可能就不会使用,导出数据,我们正在做的一个项目中与四川地区有关,所以导出数据就有如下需求: 1.  按各市导出数据, ...