extJs學習基礎5 理解mvvm的一個小案例

標籤：style   blog   http   io   ar   color   os   使用   sp   

今天很是幸運,看到了一位大神的部落格，學習了不少的東西。太感謝了.（滿滿的都是愛啊）

建議去學習這個大神的部落格，真心不錯。

部落格地址：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.js13     viewModel: {14         type: ‘myviewport‘     // 找到 MyViewportViewModel.js15     },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 });

 

extJs學習基礎5 理解mvvm的一個小案例