extJs学习基础5 理解mvvm的一个小案例

浏览数：40 / 时间：2015年06月09日

今天很是幸运,看到了一位大神的博客，学习了不少的东西。太感谢了.（满满的都是爱啊）

建议去学习这个大神的博客，真心不错。

博客地址：http://blog.csdn.net/column/details/extjs5.html?&page=1

首先要建立一个简单的项目，我是使用的 Sencha Architect 3自动生成的

app下面的文件

在视图文件中建立

MyViwepost.js （view文件中)

 1 Ext.define(‘MyApp.view.MyViewport‘, {
 2     extend: ‘Ext.container.Viewport‘,
 3     alias: ‘widget.myviewport‘,
 4 
 5     requires: [
 6         ‘MyApp.view.MyViewportViewModel‘,
 7         ‘MyApp.view.MyViewportViewController‘,
 8         ‘Ext.panel.Panel‘,
 9         ‘Ext.button.Button‘
10     ],
11     
12     controller: ‘myviewport‘,  // 设置会找到 MyViewportViewController.js
13     viewModel: {
14         type: ‘myviewport‘     // 找到 MyViewportViewModel.js
15     },
16     padding: 12,
17     layout: ‘fit‘,
18 
19     items: [
20         {
21             xtype: ‘panel‘,
22             //设置此配置选项添加或删除数据绑定其他配置
23             bind: {
　　　　　　　　　　　//这里的 name和model中对应
24                 title: ‘{name}‘,
25             },
26             
27             items: [
28                 {
29                     xtype: ‘button‘,
30                     text: ‘测试 控制器‘,
　　　　　　　　　　　　　　//这里的控制器和 controller文件中对应
31                     handler: ‘onClickButton‘
32                 }
33             ]
34         }
35     ]
36 
37 });

myViewportViewController.js （view文件中)

 1 Ext.define(‘MyApp.view.MyViewportViewController‘, {
 2     extend: ‘Ext.app.ViewController‘,
 3     alias: ‘controller.myviewport‘,
 4     onClickButton: function(){
 5         Ext.Msg.confirm(‘Confirm‘, ‘要改变面板的title值吗?‘, ‘onConfirm‘, this);  
 6     },
 7 
 8     onConfirm: function(choice){
 9         if(choice === ‘yes‘) {  
10                 //加入下面这一条语句  
11                 //this.getView().getViewModel().set(‘name‘ , "修改后的title");  
12                 console.log(this.getView().getViewModel().set(‘name‘,‘my app‘));
13             } 
14     }
15 });

MyViewportViewModel.js （view文件中)

1 Ext.define(‘MyApp.view.MyViewportViewModel‘, {
2     extend: ‘Ext.app.ViewModel‘,
3     alias: ‘viewmodel.myviewport‘,
4 
5     //这个对象包含任意数据填充 视图模型 ,然后通过视图绑定。
6     data: {
7         name: ‘app‘
8     }
9 });