与我一起extjs5(04--MVVM简要说明财产)
与我一起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简要说明财产)的更多相关文章
- 3、手把手教你Extjs5(三)MVVM特性的简单说明
下面我们来看一下自动生成的代码中的MVVM架构的关系.Main是一个可视的控件,MainController是这个控件的控制类,MainModel是这个控件的模型类. 在上面的图片中,左边是Main. ...
- ExtJS5搭建MVVM框架
概述 · ExtJs5能够搭建Js的MVC框架,通过配置路由能够通过左边树形菜单导航到所需的页面,效果如下: 搭建JS框架 新建home.htm页面作为ExtJs加载的主体页面,页面引入ExtJs需要 ...
- 跟我extjs5(03--在项目过程中加载文件)
跟我extjs5(03--在项目过程中加载文件) 上一节中用sencha工具自己主动创建了一个项目.而且能够在浏览器中查看. 如今我们来看看js类载入过程. 例如以下图所看到的: watermark/ ...
- 2、手把手教你Extjs5(二)项目中文件的加载过程
上一节中用sencha工具自动创建了一个项目,并且可以在浏览器中查看.现在我们来看看js类加载过程.如下图所示: 1、首先:浏览器中输入 localhost:1841 ,调用 index.html; ...
- extjs5(项目中文件的加载过程)
现在来看看js类加载过程.如下图所示: 1、首先:浏览器中输入 localhost:1841 ,调用 index.html; <!DOCTYPE HTML> <html> &l ...
- 跟我一起学extjs5(17--Grid金额字段单位MVVM方式的选择)
跟我一起学extjs5(17--Grid金额字段单位MVVM方式的选择) 这一节来完毕Grid中的金额字段的金额单位的转换.转换旰使用MVVM特性,整体上和控制菜单的几种模式类似.首先 ...
- 16、手把手教你Extjs5(十六)Grid金额字段单位MVVM方式的选择
这一节来完成Grid中的金额字段的金额单位的转换.转换旰使用MVVM特性,总体上和控制菜单的几种模式类似.首先在目录app/view/main/menu下建立文件Monetary.js,用于放金额单位 ...
- [ExtJS5学习笔记]第九节 Extjs5的mvc与mvvm框架结构简介
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38537431 本文作者:sushengmiyan ------------------ ...
- [ExtJS5学习笔记]第九节 Extjs5的mvc与mvvm框架结构简单介绍
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38537431 本文作者:sushengmiyan ------------------ ...
随机推荐
- 22个值得收藏的android开源码-UI篇
本文介绍了android开发人员中比較热门的开源码,这些代码绝大多数能够直接应用到项目中. FileBrowserView 一个强大的文件选择控件.界面比較美丽,使用也非常easy. 特点:能够自己定 ...
- httpcomponents-client-4.4.x
Chapter 1. Fundamentals Prev Next Chapter 1. Fundamentals 1.1. Request execution The most essent ...
- Go by Example
Go by Example Go is an open source programming language designed for building simple, fast, and reli ...
- linux下Oracle11g RAC搭建(九)
linux下Oracle11g RAC搭建(九) 八.创建ASM仓储 相同在图形化界面操作 [root@node1 ~]# su - grid [grid@node1 ~]$ asmca //创 ...
- uva10791 uva10780(分解质因数)
http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...
- 跨平台移动框架iMAG开发入门
iMAG是一个非常简洁高效的移动跨平台开发框架,开发一次能够同一时候兼容Android和iOS平台,有点儿Web开发基础就能非常快上手.当前移动端跨平台开发的框架有非常多,但用iMAG另一个优点,就是 ...
- Path相关评论的方法(一)
以前的主要是关于Canvas的translate(平移) .scale(缩放) .rotate(旋转) .skew(错切).接下来几篇主要讲下android里的Path(封装了贝塞尔曲线)& ...
- linux上安装Drupal
linux上安装Drupal 前言:国内用drupal的并不太多,网上资料也很少.要注意的是drupal尽量别使用apt来安装,特别是ubuntu平台的drupal做出了一定的更改,会妨碍后期的学习和 ...
- python进阶八_警告和异常
心情有点纠结,怎么说呢,倒不是由于其它学习上的事情,反而是由于生活上狗血的剧情逼着人偏离,渐行渐远,人跟人之间有误会也是正常的,可能是由于交流不够,彼此不够了解吧,希望能尽快度过这一段纠结的日子,简单 ...
- 移植kl档,但调用默认Generic.kl解决的方法
从飞机到现在移植模型来开发遥控器按键,调查发现,大部分的功能键始终没有任何效果. 跑 dumpsys input 要查看当前的关键kl, 查找KeyLayoutFile它原来是默认Generic.kl ...