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

与我一起extjs5(04--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中找对应的函数。才干确定究竟有没有和函数名称是什么。

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