Extjs MVC模式
最近在学习Extjs,发现他可以使用MVC模式,不但可以组织代码,而且可以 减少实现的内容,模型(Models)和控制器(Controllers)也被引入其中。
Model模型是字段和它们的数据的集合。
View视图是组件的一种,专注于界面展示。
Controllers控制器,一个安放所有使你的app正确工作的代码位置,所有的动作,包括如何渲染view,如何初始化model,和app的其他逻辑。
将Extjs的包导好就可以开始创建MVC模式的Extjs界面了。
每个Extjs4的应用都从一个Application类的实例开始,这个实例包括应用的全局配置,这个实例也负责维护对全部模型,视图,控制器的引用的维护,还有一个launch函数,会在加载项加载完成后调用。
1.创建一个简单的实例,首先需要选择一个全局的命名空间,所有的应用类都应该放在其中.
name:"AM"就是全局变量,并自动注册命名空间“AM”到Ext.Loader中。
appFolder:“app”表示文件需要去app文件夹下寻找。
2.定义一个Controller控制器,它就是应用的粘合剂,=他们所作的事情就是监听事件并执行动作,创建app/controller/Users.js这个文件
在app.js中添加对Users控制器的引用:
控制器会被自动加载,并且Users的init方法会在launch之前调用。
3.我们去定义一个视图,现在我们添加一个显示所有系统中的用户,首先创建app/view/user/List.js文件,
这个视图类就是一个普通的类,在这里我们给它设置别名,这样我们就可以用xtype去调用这个组件。
接下来我没去将它添加到控制器。
接下来修改app.js让视图在viewport中渲染,需要修改launch方法
需要注意的就是view中指定了“user.List”,这是告诉应用自动加载对应文件,如果需要修改,文件路径也需要修改。
下面就是修改之后的界面。
4.控制器对grid的控制,首先我们需要去再去创建一个视图app/view/user/Edit.js,来写一个对第一个表格双击事件的定义。
修改controller,对Edit进行引用。
双击表格就会发现弹出一个新的面板。
5.现在有了表单,就可以开始编辑和保存用户信息了,但是在这之前需要爱做一些重构,需要创建一个Store,这样可以更方便我们在应用的其他位置引用并更新信息,app/store/Users.js
让控制器加载store。
去List视图中将内联的store换掉,改为ID引用
6.在Extjs4中有一个强大的Ext.data.Model类,在编辑用户时我们可以借助它重构Store,创建一个Model app/model/User.js
在controller层引用model
在store中替换。
现在可以去检查一下是否可以正常运行,如果不可以就要好好检查之前的代码了。
7.利用模型保存数据。我们现在有了一个用户数据表,双击可以打开编辑窗口,现在要做的就是编辑变更,编辑窗口有一个编辑表单保存按钮,现在开始更新控制器。
修改Store中的代码,将data修改为proxy,代理是让Store或者Model加载和保存数据的一个方式,这里我们使用Ajax代理来加载数据。 data/users.json
现在可以使一下是不是可修改数据了。
Extjs MVC模式的更多相关文章
- Extjs MVC模式开发,循序渐进(一)
本文讲述extjs mvc的Helloworld,tabPanel,event,页面布局layout等内容. 本页包含:MVC模式案例(一)~MVC模式案例(六),从搭建extjs mvc到点击按钮生 ...
- extjs MVC模式的个人看法
针对一个后台管理页面是mvc模式,后台也是mvc模式下的项目,要怎么去熟悉呢? 首先以我个人的认解,先从后台的管理界面来看,会有control,model,store,view:其中先看view的代码 ...
- 关于Extjs MVC模式上传文件的简单方式
Extjs新手研究上传文件的事情估计是件很头痛的问题,毕竟,我就在头痛.最近两天一直在忙文件上传问题,终于小有收获. 用的是Extjs+MVC3.0+EF开发,语言为C#.前台window代码显示列内 ...
- Extjs MVC学习随笔01
Extjs Mvc模式下的整个MVC框架体系即下图: 包含了Controller(实现方法层),Store(数据来源管理层),View(页面布局层).之所以用MVC我想是因为减轻针对某一页面的单一的J ...
- Extjs MVC开发模式详解
Extjs MVC开发模式详解 在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开发模式, ...
- asp.net下利用MVC模式实现Extjs表格增删改查
在网上看到有很多人写extjs下的表格控件的增删改查,但是大多数都是直接从后台读取数据,很少有跟数据库进行交互的模式. 今天就来写一个这样的例子.欢迎大家交流指正. 首先简单介绍一下MVC模式,MVC ...
- 二十七、EFW框架BS系统开发中的MVC模式探讨
回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.3:http://pan.baidu.com/s/1c0dADO0 EFW框架实例源代码下载:http://p ...
- ExtJS MVC学习手记 1
开发环境: ExtJS4.2 eclipse indigo 开发目标 搭建项目框架,创建viewport 开发步骤说明 这次主要使用extjs4的mvc模式创建viewport.籍此初步了解mvc模 ...
- ExtJS MVC结构
概述 大型的应用在开发和运维上都存在着困难.应用功能的调整和开发人员的调动都会影响对项目的掌控.ExtJS4带来了一种新的应用结构.这种结构不止用于组织代码,也能有效的减少必要的代码量. 这次ExtJ ...
随机推荐
- 【CC2530入门教程-01】CC2530微控制器开发入门基础
[引言] 本系列教程就有关CC2530单片机应用入门基础的实训案例进行分析,主要包括以下6部分的内容:[1]CC2530微控制器开发入门基础.[2]通用I/O端口的输入和输出.[3]外部中断初步应用. ...
- java 深度拷贝 复制 深度复制
1.深度拷贝.复制代码实现 最近需要用到比较两个对象属性的变化,其中一个是oldObj,另外一个是newObj,oldObj是newObj的前一个状态,所以需要在newObj的某个状态时,复制一个一样 ...
- RecycleView Bug:java.lang.IndexOutOfBoundsException: Inconsistency detected.
今天使用RecyclerView时,上下两个RecyclerView,在实现下拉刷新时,报错: java.lang.IndexOutOfBoundsException: Inconsistency d ...
- Android中TextView设置字体
最近项目中出现把字体设置成宋体,微软雅黑,黑体,楷体等的需求; 度娘发现Android系统默认支持三种字体,分别为:“sans”, “serif”, “monospace",除此之外还可以使 ...
- skb管理函数之alloc_skb、dev_alloc_skb、kfree_skb、dev_kfree_skb、consume_skb
alloc_skb--分配skb dev_alloc_skb--分配skb,通常被设备驱动用在中断上下文中,它是alloc_skb的封装函数,因为在中断处理函数中被调用,因此要求原子操作(GFP_AT ...
- Laravel 项目登录报错:The MAC is invalid.
在 Laravel 项目完成部署到服务器.数据库导入成功后 后台登录报错: 原因是 Laravel 的 APP_KEY 和 encrypt() 函数加密的问题.(encrypt() 是 Laravel ...
- git - 使用原理
对git操作最大的功臣就是.git目录下的HEAD HEAD是什么 HEAD其实是一个类似于指针的东西,只不过这个指针的含义是指向当前的分支,当你再[ git checkout 分支 ] 的时候这个分 ...
- css3属性书写的时候带的一些前缀的意思
使用css3属性时,大部分都要带这些识别前缀,早期点的浏览器才能识别.现在最新版的浏览器基本都支持css3 基本都不用写前缀 ,写前缀是为了向前兼容老版本的浏览器而已. -ms-transform: ...
- php设计模式三-----建造者模式
1.简介 意图:将一个复杂的构建与其表示相分离,使得同样的构建过程可以创建不同的表示. 主要解决:主要解决在软件系统中,有时候面临着"一个复杂对象"的创建工作,其通常由各个部分的子 ...
- Disruptor Ringbuffer
系列译文: http://ifeve.com/disruptor/ 当有多个消费者时,(按Disruptor的设计)每个消费者各自控制自己的指针,依次读取每个Slot(也就是每个消费者都会读取到所有的 ...