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
})
}
});