今天很是幸运,看到了一位大神的博客，学习了不少的东西。太感谢了.（满满的都是爱啊）
建议去学习这个大神的博客，真心不错。
博客地址：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中对应
title: '{name}',
},
items: [
{
xtype: 'button',
text: '测试 控制器',
//这里的控制器和 controller文件中对应
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'
}
});