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的更多相关文章

  1. ExtJS MVC学习手记 1

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

  2. ExtJS MVC学习手记

    开始学习ExtJS的MVC了.这篇文章仅是用来做一个目录,为自己这个阶段的学习内容做个索引. 手记涉及的文章: EXTJS MVC结构(译自ExtJS4.0文档中的<MVC Architectu ...

  3. ExtJS MVC学习手记 2

    开发环境 eclipse(indigo) ExtJS4.0 开发目标 使用store.model和controller创建菜单树 开发步骤 之前我们已经建立了一个MVC的项目框架.现在要做的就是在这个 ...

  4. 【MVC学习笔记01】初窥奥秘

    前言 最近工作落实了,是我非常喜欢的无线前端,会接触很多新东西啦,需要努力才行.因为会用到backbone,所以要学习MVC啦. MVC(模型-视图-控制器),这种模式最早被用于构建桌面程序和服务器端 ...

  5. ExtJS MVC 学习手记3

    在演示应用中,我们已经创建好了viewport,并为之添加了一个菜单树.但也仅仅是这样,点击树或应用的其他地方获得不到任何响应.这个演示应用还是一个死的应用. 接下来,我们让这个应用活起来. 首先,给 ...

  6. MVC学习笔记-01

    什么是MVC MVC是指(Model-View-Controll即模型-视图-控制器)用于表示表示一种软件架构模式,它把软件分成三个基本的部分:模型(Model),视图(view),控制器(Contr ...

  7. MVC 学习随笔(一)

    Model的绑定. (一)使用NameValueCollectionValueProvider C# 对NameValueCollectionValueProvider的支持是通过下面的类实现的 // ...

  8. MVC学习随笔----如何在页面中添加JS和CSS文件

    http://blog.csdn.net/xxjoy_777/article/details/39050011 1.如何在页面中添加Js和CSS文件. 我们只需要在模板页中添加JS和CSS文件,然后子 ...

  9. Spring MVC学习笔记 01

    applicationcontext.xml的配置 <?xml version="1.0" encoding="UTF-8" ?> <bean ...

随机推荐

  1. 主页面、iframe之间调用以及传值

    主页面.iframe之间的调用和传值,无非就是两个交互形式: 主页面与子页面的交互 子页面之间的交互 接下来要讲的是四种交互传值的方式:利用postMessage方法传值.DOM操作传值.URL方式传 ...

  2. 关于ssh_copy_id脚本解析

    [oldgirl@module ~]$ more /usr/bin/ssh-copy-id #!/bin/sh # Shell script to install your public key on ...

  3. jquery cdn/////////////////zzz

    jquery-2.1.1 注:jquery-2.0以上版本不再支持IE 6/7/8)百度引用地址 (推荐目前最稳定的,不会出现延时打不开情况) 百度压缩版引用地址:<script src=&qu ...

  4. oracle 11g 服务启动时提示1053错误,服务启动不了,重新配置监听解决问题

    早上发现oracle服务启动不了了,找了很多资料,没找到有用的.通过重新配置监听解决问题.

  5. 在access中如何创建数据库。你认为数据库在网站开发中所扮演的角色是什么。使用数据库和使用文件,两者的优缺点各是什么。

    首先在access里面填写所用的信息,将数据库创建,在导入程序设计里进行完成代码. 首先打开我们的access程序,打开方法是单击开始——所有程序. 所有程序中找到microsoft office文件 ...

  6. delphi 图像旋转

    网络搜集的 觉得有用的拿去吧  速度不错呢 //旋转90° procedure Rotate(Bitmap: TBitmap); type THelpRGB = packed record rgb: ...

  7. ABP dynamic API

    打开ABP的事例项目SimpleTaskSystem.WebSpaAngular 中LayoutView <!-- Dynamic scripts of ABP system (They are ...

  8. MiniUI动态添加table表格

    本文将介绍一下,如何用Jquery MiniUi动态添加一行table表格 1.效果展示 ↓ 2.具体代码 <script type="text/javascript"> ...

  9. GPIO口及中断API函数【转】

    本文转载自:http://blog.sina.com.cn/s/blog_a6559d9201015vx9.htmlG #include <linux/gpio.h> // 标准 GPIO ...

  10. Java数据结构与算法之---求两个数的最大公约数(欧几里得算法)

    一个简单的小算法来获取两个数的最大公约数, public class Test { public static void main(String[] args) { long result = gcd ...