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

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

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

博客地址：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 });