Extjs MVC模式

时间:2022-09-04 08:25:50

  最近在学习Extjs,发现他可以使用MVC模式,不但可以组织代码,而且可以 减少实现的内容,模型(Models)和控制器(Controllers)也被引入其中。

  Model模型是字段和它们的数据的集合。

  View视图是组件的一种,专注于界面展示。

  Controllers控制器,一个安放所有使你的app正确工作的代码位置,所有的动作,包括如何渲染view,如何初始化model,和app的其他逻辑。

  将Extjs的包导好就可以开始创建MVC模式的Extjs界面了。

  每个Extjs4的应用都从一个Application类的实例开始,这个实例包括应用的全局配置,这个实例也负责维护对全部模型,视图,控制器的引用的维护,还有一个launch函数,会在加载项加载完成后调用。

  1.创建一个简单的实例,首先需要选择一个全局的命名空间,所有的应用类都应该放在其中.

Extjs MVC模式

     name:"AM"就是全局变量,并自动注册命名空间“AM”到Ext.Loader中。

    appFolder:“app”表示文件需要去app文件夹下寻找。

Extjs MVC模式

    2.定义一个Controller控制器,它就是应用的粘合剂,=他们所作的事情就是监听事件并执行动作,创建app/controller/Users.js这个文件

Extjs MVC模式

      在app.js中添加对Users控制器的引用:

Extjs MVC模式

    控制器会被自动加载,并且Users的init方法会在launch之前调用。

Extjs MVC模式

    3.我们去定义一个视图,现在我们添加一个显示所有系统中的用户,首先创建app/view/user/List.js文件,

Extjs MVC模式

    这个视图类就是一个普通的类,在这里我们给它设置别名,这样我们就可以用xtype去调用这个组件。

    接下来我没去将它添加到控制器。

Extjs MVC模式

    接下来修改app.js让视图在viewport中渲染,需要修改launch方法

Extjs MVC模式

    需要注意的就是view中指定了“user.List”,这是告诉应用自动加载对应文件,如果需要修改,文件路径也需要修改。

    下面就是修改之后的界面。

Extjs MVC模式

    4.控制器对grid的控制,首先我们需要去再去创建一个视图app/view/user/Edit.js,来写一个对第一个表格双击事件的定义。

Extjs MVC模式

    修改controller,对Edit进行引用。

Extjs MVC模式

    双击表格就会发现弹出一个新的面板。

Extjs MVC模式

    5.现在有了表单,就可以开始编辑和保存用户信息了,但是在这之前需要爱做一些重构,需要创建一个Store,这样可以更方便我们在应用的其他位置引用并更新信息,app/store/Users.js

Extjs MVC模式

    让控制器加载store。

Extjs MVC模式

    去List视图中将内联的store换掉,改为ID引用

Extjs MVC模式

    6.在Extjs4中有一个强大的Ext.data.Model类,在编辑用户时我们可以借助它重构Store,创建一个Model  app/model/User.js

Extjs MVC模式

    在controller层引用model

Extjs MVC模式

    在store中替换。

Extjs MVC模式

    现在可以去检查一下是否可以正常运行,如果不可以就要好好检查之前的代码了。

    7.利用模型保存数据。我们现在有了一个用户数据表,双击可以打开编辑窗口,现在要做的就是编辑变更,编辑窗口有一个编辑表单保存按钮,现在开始更新控制器。

Extjs MVC模式

  修改Store中的代码,将data修改为proxy,代理是让Store或者Model加载和保存数据的一个方式,这里我们使用Ajax代理来加载数据。 data/users.json

Extjs MVC模式

  Extjs MVC模式

        现在可以使一下是不是可修改数据了。

Extjs MVC模式的更多相关文章

  1. Extjs MVC模式开发,循序渐进(一)

    本文讲述extjs mvc的Helloworld,tabPanel,event,页面布局layout等内容. 本页包含:MVC模式案例(一)~MVC模式案例(六),从搭建extjs mvc到点击按钮生 ...

  2. extjs MVC模式的个人看法

    针对一个后台管理页面是mvc模式,后台也是mvc模式下的项目,要怎么去熟悉呢? 首先以我个人的认解,先从后台的管理界面来看,会有control,model,store,view:其中先看view的代码 ...

  3. 关于Extjs MVC模式上传文件的简单方式

    Extjs新手研究上传文件的事情估计是件很头痛的问题,毕竟,我就在头痛.最近两天一直在忙文件上传问题,终于小有收获. 用的是Extjs+MVC3.0+EF开发,语言为C#.前台window代码显示列内 ...

  4. Extjs MVC学习随笔01

    Extjs Mvc模式下的整个MVC框架体系即下图: 包含了Controller(实现方法层),Store(数据来源管理层),View(页面布局层).之所以用MVC我想是因为减轻针对某一页面的单一的J ...

  5. Extjs MVC开发模式详解

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

  6. asp.net下利用MVC模式实现Extjs表格增删改查

    在网上看到有很多人写extjs下的表格控件的增删改查,但是大多数都是直接从后台读取数据,很少有跟数据库进行交互的模式. 今天就来写一个这样的例子.欢迎大家交流指正. 首先简单介绍一下MVC模式,MVC ...

  7. 二十七、EFW框架BS系统开发中的MVC模式探讨

    回<[开源]EFW框架系列文章索引>        EFW框架源代码下载V1.3:http://pan.baidu.com/s/1c0dADO0 EFW框架实例源代码下载:http://p ...

  8. ExtJS MVC学习手记 1

    开发环境: ExtJS4.2 eclipse indigo 开发目标  搭建项目框架,创建viewport 开发步骤说明 这次主要使用extjs4的mvc模式创建viewport.籍此初步了解mvc模 ...

  9. ExtJS MVC结构

    概述 大型的应用在开发和运维上都存在着困难.应用功能的调整和开发人员的调动都会影响对项目的掌控.ExtJS4带来了一种新的应用结构.这种结构不止用于组织代码,也能有效的减少必要的代码量. 这次ExtJ ...

随机推荐

  1. Android 手机卫士--导航界面3、4和功能列表界面跳转逻辑处理

    刚刚花了一点时间,将导航界面3.4的布局和相应的跳转逻辑写了一下: Setup3Activity代码如下: /** * Created by wuyudong on 2016/10/10. */ pu ...

  2. Socket之TCP连接&lowbar;TcpNoDelay

    摘自: http://jerrypeng.me/2013/08/mythical-40ms-delay-and-tcp-nodelay/

  3. 《深入理解Bootstrap》勘误

    感谢大家 感谢大家仔细阅读本书,并给本书指出了那么多的错误,下次重印时,一定会修正. 勘误列表 ID 发行人 章节 原文 更新文 备注 1 剑衣清风(微博) 1.5选择器(p7) [att$=valu ...

  4. document获取节点byTagName

    /* *对于页面中的超链接,新闻链接通过新窗口打开 *当然是要获取其中被操作的超链接对象. *可是通过Document获取超链接,拿到的是页面中所有的超链接节点. *只想获取一部分如何办呢? *只要获 ...

  5. cocos2dx 3&period;x&lpar;捕鱼达人炮台角度换算&rpar;

    // // GameScence.hpp // NotesDamo // // Created by apple on 16/10/23. // // #ifndef GameScence_hpp # ...

  6. 【Android实战开发】3G技术和Android发展简介

    随着移动设备的不断普及和发展,相关软件的开发也越来越受到人们的关注,其中要提及的就是Android开发.本系列博客主要为大家介绍Android的开发,可能会有人问:现在互联网上已经有很多的Androi ...

  7. keil or c51 汇编调用c语言函数 容易忽视的问题

    最近,在用keil 写一个小程序时,想实践一下从汇编调用 C语言函数,我们都知道C语言调用汇编函数讨论得较多,但反过来,从汇编中调用C语言的函数未见深入分析:在开始的时候,还是忽视了一个问题,就是对现 ...

  8. gradle 打包springboot项目,找不到项目jar application&period;class

    如题:gradle 打包springboot项目,找不到项目jar入口main方法:application.class 检查:lib/目录下没有相应项目的jar包 用gradle命令行查看日志:gra ...

  9. Learning-Python【30】:基于UDP协议通信的套接字

    UDP协议没有粘包问题,但是缓冲区大小要足够装数据包大小,建议不要超过 512 服务端: # 服务端 import socket server = socket.socket(socket.AF_IN ...

  10. Python正则表达式与re模块

    在线正则表达式测试 http://tool.oschina.net/regex/ 常见匹配模式 模式 描述 \w 匹配字母数字及下划线 \W 匹配非字母数字下划线 \s 匹配任意空白字符,等价于 [\ ...