今天很是幸运,看到了一位大神的博客,学习了不少的东西。太感谢了.(满满的都是爱啊)
建议去学习这个大神的博客,真心不错。
博客地址: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.js 13 viewModel: { 14 type: ‘myviewport‘ // 找到 MyViewportViewModel.js 15 }, 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 });
时间: 2024-10-04 19:41:37