EXTJS4控制器Controller详解

控制器Controller通常是和application绑定在一起的。它们主要作用是监听事件（通常对view），并采取一些action。下面是我们如何创建一个Controller来管理用户：

1	Ext.define('MyApp.controller.Users', {

2	extend: 'Ext.app.Controller',

3

4	init: function() {

5	console.log('Initialized Users! This happens before the Application launch function is called');

6

}

7

});

init函数是一个特殊的方法，在你的application启动时调用。它是在application的Viewport被创建以前执行的。
init函数是通常作用就是Controller与View进行交互设置，通常用于与另一个Controller的功能 - 控制相结合。控制功能可以很容易地监听View的事件，并采取一些action和handler。如果我们要当panel渲染的时候使用Controller来通知我们,代码如下：

1	Ext.define('MyApp.controller.Users', {

2	extend: 'Ext.app.Controller',

3

4	init: function() {

5	this.control({

6	'viewport > panel': {

7	render: this.onPanelRendered

8

}

9

});

10

},

11

12	onPanelRendered: function() {

13	console.log('The panel was rendered');

14

}

15

});

这里在init函数的this.control中设置了listeners，就和在View中设置是一样的效果。使用了ext4新的组建选择器，如果你还不熟悉ext4新的选择器，请看博文http://www.yuuzle.com/extjs4-and-jquery-selector-comparison.html

使用refs

新的refs系统是Controller最有用的功能。通过使用新Ext.ComponentQuery，很容易很方便的找到View中的引用。让我们来看看在现在这样一个例子：

1	Ext.define('MyApp.controller.Users', {

2	extend: 'Ext.app.Controller',

3

4

refs: [

5

{

6	ref: 'list',

7	selector: 'grid'

8

}

9

],

10

11	init: function() {

12	this.control({

13	'button': {

14	click: this.refreshGrid

15

}

16

});

17

},

18

19	refreshGrid: function() {

20	this.getList().store.load();

21

}

22

});

上面的例子refs中定义了选择器“grid”引用名为“list”，在这里就可以使用getList（）方法来调用选择器的结果值了

通常的getter方法

1	Ext.define('MyApp.controller.Users', {

2	extend: 'Ext.app.Controller',

3

4	models: ['User'],

5	stores: ['AllUsers', 'AdminUsers'],

6

7	init: function() {

8	var User = this.getUserModel(),

9	allUsers = this.getAllUsersStore();

10

11	var ed = new User({name: 'Ed'});

12	allUsers.add(ed);

13

}

14

});

通过指定Model、Store和Controller的关系，再动态加载它们的文件位置（app/model/User.js, app/store/AllUsers.js 和 app/store/AdminUsers.js），并创建他们的getter函数。上面的例子会创建一个新的用户Model实例，并把它添加到ALLUSERS Store。在这个函数中你可以做任何事情，这里只是做了一些简单的功能演示。