与我一起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 ------------------ ...
随机推荐
- linux编程进阶书推荐APUE,UNP
编程进阶这里强烈推荐<unix环境高级编程>(简称APUE)和<unix网络编程>(简称UNP),这两本书可是经典中的经典啊,作 者是大名鼎鼎的 W.Richard Steve ...
- 13.怎样自学Struts2之Struts2本地化[视频]
13.怎样自学Struts2之Struts2本地化[视频] 之前写了一篇"打算做一个视频教程探讨怎样自学计算机相关的技术",优酷上传不了,仅仅好传到百度云上: http://pan ...
- 碎碎念,浅饮-------Day30
这不是关于技术的文章,它偏离了我原来的计划轨迹.但,我相信这将是远远超出了技术的意义使我无论什么价格值. 高考已经开始,不知道在这片宁静的夜空下有多少人已经美美的睡了,香甜憨然.又有多少人这睡着的眼角 ...
- WPF界面设计技巧(9)—使用UI自动化布局
原文:WPF界面设计技巧(9)-使用UI自动化布局 最近一直没时间更新这系列文章,因为我一直在埋头编写我的第一个WPF应用程序:MailMail 今天开始编写附属的加密/解密工具,对UI自动化布局有些 ...
- (40)JS运动之右下角悬浮框
<!DOCTYPE HTML> <!-- --> <html> <head> <meta charset="utf-8"> ...
- 简单工厂 VS 工厂方法 VS 抽象工厂
说到设计模式.自然少不了简单工厂模式.工厂方法和抽象工厂这三姐妹. 它们之间可谓是各有所长,术业专攻啊!这篇博客来简单的梳理一下三者之间的关系. 那么工厂又是什么意思呢?结合三者的特点,我觉得能够这样 ...
- 教你pomeloclient包libpomelo增加cocos2d-x 3.0工程(Windows、Android、IOS平台)
Windows平台 操作系统:Windows7(64-bit) VS版本号:2013 Cocos2d-x版本号:3.0 project路径:E:\cocos2d-prj\ 1.从github下载lib ...
- 【从翻译mos文章】rac数据库,HC_<SID>.dat其他文件Oracle_Home用例下。
rac数据库.HC_<SID>.dat其他文件Oracle_Home用例下. 参考原始: RAC database HC_<SID>.dat is used by instan ...
- PL/SQL 游标的使用
游标的使用 ①游标概念 为了处理SQL 语句,ORACLE 必须分配一片叫上下文( context area )的区域来处理所必需的信息, 当中包含要处理的行的数目.一个指向语句被分析以后的表示 ...
- PocketSphinx语音识别系统语言模型的训练和声学模型的改进
PocketSphinx语音识别系统语言模型的训练和声学模型的改进 zouxy09@qq.com http://blog.csdn.net/zouxy09 关于语音识别的基础知识和sphinx的知识, ...