ext.js的mvc
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的更多相关文章
- ext.js的mvc开发模式详解
ext.js的mvc开发模式详解和环境配置 在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开 ...
- Ext.js 之MVC
Ext.js 4.0之MVC
- [Ext JS 4] MVC 应用程序框架
前言 大型客户端应用程序总是很难编写,很难组织和很难维护.随着功能的增加和更多的开发人员加入项目,对项目的控制也越来越困难了.Ext JS 4 提供了一个新的应用程序框架帮助组织代码. 模型 - 一组 ...
- 2017年第1贴:EXT.JS使用MVC模式时,注意如何协调MODEL, STORE,VIEW,CONTROLLER的关系
也调了快一天,死活找不到窍门. MODEL, STORE,VIEW的调置测试了很久,试了N种方法,不得其果. 最后,试着在APPLICATION里加入CONTROLLER, 在CONTROLLER里加 ...
- 【翻译】对于Ext JS 5,你准备好了吗?
原文:Are You Ready for Ext JS 5? Ext JS 5:准备升级 对于Ext JS 5加入Sencha的大家庭,我们感到非常高兴!作为一个主要版本,在Ext JS 5引入了一堆 ...
- 新书《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 基 ...
- Ext.js细节:在MVC中处理Widget Column,GetCmp和ComponentQuery, Id和ItemId
针对EXT.JS版本的演进,要不断的学习新的最佳实践方法. 比如,在定义组件时,尽管用itemid,而不是id. 在搜索组件时,尽量用ComponentQuery,而不是getCmp. 在MVC中处理 ...
- 【转】EXT JS MVC开发模式
原文链接:EXT JS MVC开发模式 在app(亦即根目录)文件夹下面创建controller.model.store和view文件夹,从名称上就知道他们该放置什么代码了吧.然后创建Applicat ...
- sencha ext js 6 入门
Sencha Ext JS号称是目前世界上最先进和最强大的.支持多平台多设备的JavaScript应用程序开发框架.首先看一下Ext JS的发展简史. 1 Ext JS发展简史 YUI-Ext的作者J ...
随机推荐
- 执行start-dfs.sh后,datenode没有启动的解决办法
执行start-dfs.sh后,datenode没有启动,很大一部分原因是因为在第一次格式化dfs后,启动并使用了hadoop,后来又重新执行了格式化命令(hdfs namenode -format) ...
- JavaScript高级用法一之事件响应与网页交互
综述 本篇的主要内容来自慕课网,事件响应与网页交互,主要内容如下 1 什么是事件 2 鼠标单击事件( onclick ) 3 鼠标经过事件(onmouseover) 4 鼠标移开事件(onmouseo ...
- C语言学习之路
c语言学习 初识c语言 c语言数据类型.运算符和表达式(整数浮点数) 字符型数据/字符串 算术运算符和算术表达式(优先级,结合性等) 顺序程序设计(运算符之类内容,字符输入输出等) C/C++ 查看数 ...
- 说说自己对RESTful API的理解
REST不是英文上的rest单词,其英文缩写为presentational State Transfer ,直译为表现状态转移,咋看起来很学术,不懂,其实不用去死抠这个词的意思.REST是一种约束和架 ...
- Html 助手
/*! * Html 助手 * version: 1.0.0-2018.07.25 * Requires ES6 * Copyright (c) 2018 Tiac * http://www.cnbl ...
- 【laravel5.6】 laravel中间件内生成参数并且传递到控制器的2种方法
中间件方法: /** * 自定义中间件: * * @param \Illuminate\Http\Request $request * @param \Closure $next * @return ...
- nginx 动静分离(相同URL)
#报表 location ~* /(report)/ { if ($request_uri !~* .*(jd|taobao|operator).* ){ proxy_pass http://tweb ...
- python-Levenshtein几个计算字串相似度的函数解析
linux环境下,没有首先安装python_Levenshtein,用法如下: 重点介绍几个该包中的几个计算字串相似度的几个函数实现. 1. Levenshtein.hamming(str1, str ...
- 遍历DOM打平
html 模板 <div class="box"> <p>1</p> <p>2</p> <div> < ...
- Flask web开发之路五
Jinjia2模板 紧接着上篇博客,接下去写if条件判断和for循环遍历以及过滤器 if条件判断 主app文件代码: from flask import Flask,render_template a ...