Extjs4 MVC Controller使用方法

这篇文章主要说一下Extjs MVC模式中controller类的使用方法。

很清楚，controller主要帮助我们实现页面中事件的控制，如下：

1、实现对页面中某个元素触发某个事件：将上一篇中的controller改成如下：

controller代码

 1 Ext.define('MVC.controller.MVCS', {
 2     extend: 'Ext.app.Controller',
 3 
 4     init: function() {
 5         this.control({
 6             'viewport > panel' : {
 7                 render : this.onPanelRendered
 8             }
 9         });
10     },
11     onPanelRendered: function() {
12         console.log('The panel was rendered');
13     }
14 });

如上，this.control的功能就是查找到页面中的某个元素，单引号中的意思是页面中viewport中的panel元素，render代表当panel渲染完成后出发的事件，后边为我们写的事件。

我们可以测试一下在页面中生成多个panel，app.js改成如下：

app.js

 1 Ext.application({
 2     name: 'MVC',
 3 
 4     appFolder: 'mvc',
 5 
 6     launch: function() {
 7         Ext.create('Ext.container.Viewport', {
 8             layout: 'fit',
 9             items: [
10                 {
11                     xtype: 'panel',
12                     title: 'Users',
13                     html : 'List of users will go here'
14                 },
15               {
16                     xtype: 'panel',
17                     title: 'second',
18                     html : 'Test second'
19                 }
20             ]
21         });
22     }
23 });

结果如下：

通过开发工具我们发现输出了两次'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的搭配使用方法。