与我一起extjs5(04--MVVM简要说明财产)


        以下我们来看一下自己主动生成的代码中的MVVM架构的关系。

Main是一个可视的控件,MainController是这个控件的控制类。MainModel是这个控件的模型类。




        在上面的图片中。左边是Main.js中的代码,右边是MainController.js 和 MainModel.js中的代码。能够看到MVVM中的事件绑定和属性值绑定都用到了。上图中红色的部分标注了一个button“Button”的handler(即click)事件绑定到MainController.js中的函数“OnClickButton”之上。蓝色部分表示将panel的title属性,绑定到了MainModel的属性data的name值上,假设你要改动该Panel的值,则仅仅要改动MainModel中的data.name就能够。
        以下我们来看看网页里面的详细展示:



        以下做一个最简单的改动,将panel的title值改为“改动后的title”。改动MainController.js,增加一条语句
Ext.define('app.view.main.MainController', {
extend : 'Ext.app.ViewController', requires : ['Ext.MessageBox'], alias : 'controller.main', onClickButton : function() {
Ext.Msg.confirm('Confirm', 'Are you sure? ', 'onConfirm', this);
}, onConfirm : function(choice) {
if (choice === 'yes') {
//增加以下这一条语句
this.getView().getViewModel().set('name' , "改动后的title");
}
}
});

增加了一条语句

this.getView().getViewModel().set('name' , "改动后的title");

这条语句的信息量也非常大,分别来说明一下:

  • this表示的是当前的类,也就是MainController的实例。

  • this.getView() 表示当前控制器控制下的View类实例。
  • this.getView().getViewModel()表示该view实例绑定的Model。
  • set('name','改动后的title'),将Model的值name改动,改动后panel的title会自己主动的进行更新。

运行后的结果例如以下:
 
        我们对程序的第一处改动得以正确运行。
        对于一个要学习好extjs的人来说,官方的样例和api是不可缺少的工具。比方上面的一条语句中,我想得到当前控制器下的View,我也是去api上面的methods中找对应的函数。才干确定究竟有没有和函数名称是什么。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamZvaw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

版权声明:本文博主原创文章,博客,未经同意不得转载。

与我一起extjs5(04--MVVM简要说明财产)的更多相关文章

  1. 3、手把手教你Extjs5(三)MVVM特性的简单说明

    下面我们来看一下自动生成的代码中的MVVM架构的关系.Main是一个可视的控件,MainController是这个控件的控制类,MainModel是这个控件的模型类. 在上面的图片中,左边是Main. ...

  2. ExtJS5搭建MVVM框架

    概述 · ExtJs5能够搭建Js的MVC框架,通过配置路由能够通过左边树形菜单导航到所需的页面,效果如下: 搭建JS框架 新建home.htm页面作为ExtJs加载的主体页面,页面引入ExtJs需要 ...

  3. 跟我extjs5(03--在项目过程中加载文件)

    跟我extjs5(03--在项目过程中加载文件) 上一节中用sencha工具自己主动创建了一个项目.而且能够在浏览器中查看. 如今我们来看看js类载入过程. 例如以下图所看到的: watermark/ ...

  4. 2、手把手教你Extjs5(二)项目中文件的加载过程

    上一节中用sencha工具自动创建了一个项目,并且可以在浏览器中查看.现在我们来看看js类加载过程.如下图所示: 1、首先:浏览器中输入 localhost:1841 ,调用 index.html; ...

  5. extjs5(项目中文件的加载过程)

    现在来看看js类加载过程.如下图所示: 1、首先:浏览器中输入 localhost:1841 ,调用 index.html; <!DOCTYPE HTML> <html> &l ...

  6. 跟我一起学extjs5(17--Grid金额字段单位MVVM方式的选择)

    跟我一起学extjs5(17--Grid金额字段单位MVVM方式的选择)         这一节来完毕Grid中的金额字段的金额单位的转换.转换旰使用MVVM特性,整体上和控制菜单的几种模式类似.首先 ...

  7. 16、手把手教你Extjs5(十六)Grid金额字段单位MVVM方式的选择

    这一节来完成Grid中的金额字段的金额单位的转换.转换旰使用MVVM特性,总体上和控制菜单的几种模式类似.首先在目录app/view/main/menu下建立文件Monetary.js,用于放金额单位 ...

  8. [ExtJS5学习笔记]第九节 Extjs5的mvc与mvvm框架结构简介

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38537431 本文作者:sushengmiyan ------------------ ...

  9. [ExtJS5学习笔记]第九节 Extjs5的mvc与mvvm框架结构简单介绍

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38537431 本文作者:sushengmiyan ------------------ ...

随机推荐

  1. httl开源JAVA模板引擎,动态HTML页面输出

    HTTL(Hyper-Text Template Language)是一个适用于HTML输出的开源JAVA模板引擎,适用于动态HTML页面输出,可用于替代JSP页面,它的指令类似于Velocity. ...

  2. const void *a 与 void *const a 的差别

    const void *a 这是定义了一个指针a,a能够指向随意类型的值,但它指向的值必须是常量. 在这样的情况下,我们不能改动被指向的对象,但能够使指针指向其它对象. 比如: const void ...

  3. jquery validation remote depends 验证触发条件

    背景: 1:简介页面的变化: 2:邮箱不能反复 改动页面,邮箱默认带出,但字段上带有remote验证.不能反复,焦点由邮箱输入框失去时.会默认触发remote验证. 介绍完成 watermark/2/ ...

  4. 【DRP】删除递归树的操作

    正如图呈现的树结构.本文从任意节点删除树形结构.提供解决方案 图中,不包括其他结点的是叶子结点.包括其他结点的是父结点,即不是叶子结点. 一 本文的知识点: (1)递归调用: 由于待删除的结点的层次是 ...

  5. Cocos2d-X研究之v3.x瓦片地图具体解释

    在游戏开发过程中,我们会遇到超过屏幕大小的地图,比如即时战略游戏,使得玩家能够在地图中滚动游戏画面.这类游戏一般会有丰富的背景元素,假设直接使用背景图切换的方式,须要为每一个不同的场景准备一张背景图, ...

  6. 关于埃博拉(Ebola)基础研究病毒

    关于埃博拉(Ebola)病毒的基础研究 2005年.美国哈佛大学医学研究院(Harvard Medical School)James Cunningham教授关于埃博拉病毒有一项基础研究,研究成果发表 ...

  7. Google是不是真的不能用了?非常奇怪的问题

    这几天,事实上是这一阵子. 我连用goagent都无法上google了. 可怜我一直用Gmail邮箱.但如今我连用代理都上不了Gmail了. .. 是我自己电脑本身的问题吗?非常奇怪的问题,我原先用g ...

  8. 强联通块tarjan算法

    http://poj.org/problem?id=1236第一问:需要几个学校存在软件,才能通过传递,使得所有的学校都有软件 用tarjan算法求出强联通分量后,将每个联通分量缩成一个点,那么问题1 ...

  9. css3仿山猫侧边栏

    演示:http://jsfiddle.net/Adce2/ 其主要思想: 1, 先画边栏html. 2, 使用css3分别财产close sidebar-content动图片. 3, 使用css3的k ...

  10. 【深入浅出jQuery】源码浅析--整体架构(转)

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...