extjs5(MVVM特性

最新推荐文章于 2018-12-23 21:10:00 发布

转载最新推荐文章于 2018-12-23 21:10:00 发布 · 582 阅读

ext 专栏收录该内容

8 篇文章

订阅专栏

本文介绍ExtJS 5中的MVVM架构原理，通过实例演示如何利用MVVM实现视图与模型间的解耦及数据绑定，包括控制器与视图交互的方法。

jfok的专栏

147

原创

转载

译文

768

548944

访问

京 ICP 证 070598 号

2014 六月

原

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

分类：跟我一起学extjs5

（20876）（6）

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

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

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

下面我们来看看网页里面的具体展示：

下面做一个最简单的修改，将panel的title值改为“修改后的title”。修改MainController.js,加入一条语句

[javascript] view plain copy

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");
                }
            }
        });

加入了一条语句

[javascript] view plain copy

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中找相应的函数，才能确定到底有没有和函数名称是什么。

顶14 踩1

跟我一起学extjs5(03--项目中文件的加载过程)

跟我一起学extjs5(05--主界面上加入顶部和底部区域)

您还没有登录,请 [登录]或 [注册]

dearbear2013

很不错的mvvm例子。赞一个！

2015-11-18 01:22

gilper

请问app目录可以自定义吗

2015-02-10 16:01

YuqiSun

楼主，我想问一下，虽然cmd生成的有一个store文件夹，但是我看到网上很多store都是直接定义在viewmodel里，是不是只有多个view用到同一个store的时候才会在store文件夹理定义store？

http://www.sencha.com/forum/showthread.php?291063-MVVM-Remote-store-and-ViewModel-binding-to-GridPanel

2014-11-11 16:17