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

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

建議去學習這個大神的博客，真心不錯。

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

 

首先要建立一個簡單的項目，我是使用的 Sencha Architect 3自動生成的

app下面的文件

 

在視圖文件中建立

MyViwepost.js （view文件中)

Ext.define('MyApp.view.MyViewport', {
    extend: 'Ext.container.Viewport',
    alias: 'widget.myviewport',

    requires: [
        'MyApp.view.MyViewportViewModel',
        'MyApp.view.MyViewportViewController',
        'Ext.panel.Panel',
        'Ext.button.Button'
    ],
    
    controller: 'myviewport',  // 設置會找到 MyViewportViewController.js
    viewModel: {
        type: 'myviewport'     // 找到 MyViewportViewModel.js
    },
    padding: 12,
    layout: 'fit',

    items: [
        {
            xtype: 'panel',
            //設置此配置選項添加或刪除數據綁定其他配置
            bind: {
　　　　　　　　　　　//這里的 name和model中對應 24                 title: '{name}',
            },
            
            items: [
                {
                    xtype: 'button',
                    text: '測試 控制器',
　　　　　　　　　　　　　　//這里的控制器和 controller文件中對應 31                     handler: 'onClickButton'
                }
            ]
        }
    ]

});

myViewportViewController.js （view文件中)

Ext.define('MyApp.view.MyViewportViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.myviewport',
    onClickButton: function(){
        Ext.Msg.confirm('Confirm', '要改變面板的title值嗎?', 'onConfirm', this);  
    },

    onConfirm: function(choice){
        if(choice === 'yes') {  
                //加入下面這一條語句  
                //this.getView().getViewModel().set('name' , "修改后的title");  
                console.log(this.getView().getViewModel().set('name','my app'));
            } 
    }
});

 

MyViewportViewModel.js （view文件中)

Ext.define('MyApp.view.MyViewportViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.myviewport',

    //這個對象包含任意數據填充 視圖模型 ,然后通過視圖綁定。
    data: {
        name: 'app'
    }
});