首页 > 代码库 > extJs学习基础5 理解mvvm的一个小案例
extJs学习基础5 理解mvvm的一个小案例
今天很是幸运,看到了一位大神的博客，学习了不少的东西。太感谢了.（满满的都是爱啊）
建议去学习这个大神的博客，真心不错。
博客地址：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的一个小案例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。