ExtJS中viewController、viewModel、View、Model的关联展示

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: ['id','name'],
    proxy: {
        type: 'ajax',
        api: {
            read: 'read.json',
            update: 'update.json'
        }
    }
});
Ext.define('MyViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.myvc',
    onUserLoad: function(btn, e, eOpts) {
        this.getViewModel().linkTo('user', {
            type: 'User',
            id: 0
        })
    },
    onUserSave: function(btn, e, eOpts) {
        this.getViewModel().get('user').save({
            callback: function(record) {
                console.log( record )
            }
        })
    }
})
Ext.define('MyViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.myvm',
    
});
Ext.define('MyForm', {
    extend: 'Ext.form.Panel',
    bodyPadding: 10,
    title: 'My Form',
    controller: 'myvc',
    viewModel: {
        type: 'myvm'
    },
    items: [{
        xtype: 'textfield',
        name: 'name',
        fieldLabel: 'Name',
        bind: '{user.name}'
    }],
    tbar: [{
        text: 'Load a User',
        handler: 'onUserLoad'
    }],
    bbar: [{
        text: 'Save',
        handler: 'onUserSave'
    }]
})
Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.create('MyForm', {
            renderTo: document.body,
            width: 400
        })
    }
});