Extjs MVC学习随笔01
Extjs Mvc模式下的整个MVC框架体系即下图:

包含了Controller(实现方法层),Store(数据来源管理层),View(页面布局层)。之所以用MVC我想是因为减轻针对某一页面的单一的JS 的开发,为啥呢,可以看一下没有使用MVC模式的Extjs 的编码:

(因为我也是新手,所以可能里面的代码有点儿冗杂)
仅仅是一个页面,代码量已经上了千行以上,可想而知,对于功能复杂的页面如果用单一的Extjs UI开发的话 代码量肯定可烦人(最主要是翻来翻去的,鼠标滚轮都烦了...)。而且如果你写完这个页面,其他的页面也有相同功能的组件的话,你是不是又要重新Copy然后在写一遍重复的代码呢.... 那样也就贼恶心了。
一:视图的创建:
就像目前本人所做的项目:一个互联网医疗项目,整体就是采用的Extjs MVC模式,如果自己创建一个组件的话我们可以给其一个“xtype”:
,然后在需要调用该组件或者页面的页面只需要在items里面配置所有项的时候将其写为:{xtype:'...'}就可以将该组件拿出来使用了,当然还需要注意的是必须要在组件创建页里就是上图上有一个"requires"属性,在这里需要将所有引用该组件的页面的路径写上去,然后引用页才可以调用该组件。
二:控制器:
如果我们某一个搜索按钮有一个handler的话,我们可以将该方法写到控制器里面去,如:
这里面的“onSearch”就是一个方法,而该方法则是在控制器里面的专一的JS文件里面写着


当然这里也有一个需要注意的:我们需要指定controller的位置,这个属性也是在视图页面配置的:
三:数据来源store

这里面用的是defin,自定义的store,给了一个ID,与一个别名

其他的页面在调用这个数据源的时候就可以这样使用了:
其中type 对应的就是store里的别名“alias”属性,storeid就不用说了,这样只要ashx没写错,那么数据就会出现了:

当然具体里面还有好多更深的用法,本人也是菜鸟一个,只能慢慢学习喽 —.— 。
坚持就是收获,一口吃不成胖子,记下生活学习的点点滴滴进步,再回首,怎么地也是一笔财富。
—————— 给自己
Extjs MVC学习随笔01的更多相关文章
- ExtJS MVC学习手记 1
开发环境: ExtJS4.2 eclipse indigo 开发目标 搭建项目框架,创建viewport 开发步骤说明 这次主要使用extjs4的mvc模式创建viewport.籍此初步了解mvc模 ...
- ExtJS MVC学习手记
开始学习ExtJS的MVC了.这篇文章仅是用来做一个目录,为自己这个阶段的学习内容做个索引. 手记涉及的文章: EXTJS MVC结构(译自ExtJS4.0文档中的<MVC Architectu ...
- ExtJS MVC学习手记 2
开发环境 eclipse(indigo) ExtJS4.0 开发目标 使用store.model和controller创建菜单树 开发步骤 之前我们已经建立了一个MVC的项目框架.现在要做的就是在这个 ...
- 【MVC学习笔记01】初窥奥秘
前言 最近工作落实了,是我非常喜欢的无线前端,会接触很多新东西啦,需要努力才行.因为会用到backbone,所以要学习MVC啦. MVC(模型-视图-控制器),这种模式最早被用于构建桌面程序和服务器端 ...
- ExtJS MVC 学习手记3
在演示应用中,我们已经创建好了viewport,并为之添加了一个菜单树.但也仅仅是这样,点击树或应用的其他地方获得不到任何响应.这个演示应用还是一个死的应用. 接下来,我们让这个应用活起来. 首先,给 ...
- MVC学习笔记-01
什么是MVC MVC是指(Model-View-Controll即模型-视图-控制器)用于表示表示一种软件架构模式,它把软件分成三个基本的部分:模型(Model),视图(view),控制器(Contr ...
- MVC 学习随笔(一)
Model的绑定. (一)使用NameValueCollectionValueProvider C# 对NameValueCollectionValueProvider的支持是通过下面的类实现的 // ...
- MVC学习随笔----如何在页面中添加JS和CSS文件
http://blog.csdn.net/xxjoy_777/article/details/39050011 1.如何在页面中添加Js和CSS文件. 我们只需要在模板页中添加JS和CSS文件,然后子 ...
- Spring MVC学习笔记 01
applicationcontext.xml的配置 <?xml version="1.0" encoding="UTF-8" ?> <bean ...
随机推荐
- 今年暑假不AC
"今年暑假不AC?""是的.""那你干什么呢?""看世界杯呀,笨蛋!""@#$%^&*%...&quo ...
- com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Process 'command ' finished with non-zero exit value 1
Error:Execution failed for task ':lenovoAlbum:processReleaseResources'. > com.android.ide.common. ...
- Windows Phone 一、XAML基础语法
XAML的命名空间 命名空间格式:语法结构为“xmlns:”+“命名空间前缀名”,默认命名空间无需定义命名空间前缀名“xmlns” 命名空间的声明 <Page x:Class="App ...
- 用于基于 RPM 的 Linux 平台的 Java
成为超级用户,方法是运行 su 并输入超级用户口令. 卸载任何之前安装的 Java 程序包. rpm -e package_name 切换到所需的安装目录.键入:cd directory_path_n ...
- diff输出格式解析
1 命令格式 $diff <变动之前的文件> <变动之后的文件> 2 diff文件的三种格式 normal diff context diff unified diff 3 示 ...
- js 简体中文拼音对应表
https://github.com/silaLi/pinyin js 拼音对象,包涵大部分文字
- C++之动态数组
C99支持一种名为变长数组的结构来方便程序员.C++也提供了一种长度可在程序运行时确定的数组类型:动态数组.声明格式为:(声明 int 类型的数组) ; //此处可修改 ArraySize 的值 in ...
- android下面使用SurfaceView+ mediaPlayer播放视频
final SurfaceView surfaceView = new SurfaceView(StartupActivity.this); StartupActivity.this.mediaPla ...
- GPIO口及中断API函数【转】
本文转载自:http://blog.sina.com.cn/s/blog_a6559d9201015vx9.htmlG #include <linux/gpio.h> // 标准 GPIO ...
- [译]Dynamics AX 2012 R2 BI系列-规划分析的注意事项
https://msdn.microsoft.com/en-us/library/gg731898.aspx 在开始实施AX的分析特性前,有很多事情要考虑.本文描述了你必须考虑的事情,和在 ...