这篇文章主要说一下Extjs MVC模式中controller类的使用方法。
很清楚,controller主要帮助我们实现页面中事件的控制,如下:
1、实现对页面中某个元素触发某个事件:将上一篇中的controller改成如下:
Ext.define('MVC.controller.MVCS', { extend: 'Ext.app.Controller', init: function() { this.control({ 'viewport > panel' : { render : this.onPanelRendered } }); }, onPanelRendered: function() { console.log('The panel was rendered'); } });
如上,this.control的功能就是查找到页面中的某个元素,单引号中的意思是页面中viewport中的panel元素,render代表当panel渲染完成后出发的事件,后边为我们写的事件。
我们可以测试一下在页面中生成多个panel,app.js改成如下:
Ext.application({ name: 'MVC', appFolder: 'mvc', launch: function() { Ext.create('Ext.container.Viewport', { layout: 'fit', items: [ { xtype: 'panel', title: 'Users', html : 'List of users will go here' }, { xtype: 'panel', title: 'second', html : 'Test second' } ] }); } });
结果如下:
通过开发工具我们发现输出了两次'The panel was rendered',表明我们的controller对viewport中的所有panel元素起了作用。
2、如果相对某一个元素起作用,那么做法如下:
' viewport panel[id = panel1]'
: {
render :
this
.onPanelRendered
}
|
controller的this.control中的代码改成如上,意思是viewport中的panel中的id为panel1的元素。
结果:
表明我们的controller对panel1起了作用。
下一篇将view,同时看一下controller和view的搭配使用方法。