码迷,mamicode.com
首页 > Web开发 > 详细

跟我一起学extjs5(04--MVVM特性的简单说明)

时间:2014-07-01 10:51:40      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:开发经验   extjs5   sencha   


跟我一起学extjs5(04--MVVM特性的简单说明)


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

bubuko.com,布布扣

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

bubuko.com,布布扣

        下面做一个最简单的修改,将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会自动的进行更新。

执行后的结果如下:
bubuko.com,布布扣
 
        我们对程序的第一处修改得以正确执行。
        对于一个要学习好extjs的人来说,官方的例子和api是必不可少的工具。比如上面的一条语句中,我想得到当前控制器下的View,我也是去api上面的methods中找相应的函数,才能确定到底有没有和函数名称是什么。
bubuko.com,布布扣

跟我一起学extjs5(04--MVVM特性的简单说明),布布扣,bubuko.com

跟我一起学extjs5(04--MVVM特性的简单说明)

标签:开发经验   extjs5   sencha   

原文地址:http://blog.csdn.net/jfok/article/details/35794269

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!