EXTJS4控制器Controller详解
2012-12-28 15:32
288 查看
原文地址:http://docs.sencha.com/ext-js/4-1/#!/api/Ext.app.Controller
控制器Controller通常是和application绑定在一起的。它们主要作用是监听事件(通常对view),并采取一些action。下面是我们如何创建一个Controller来管理用户:
init函数是一个特殊的方法,在你的application启动时调用。它是在application的Viewport被创建以前执行的。
init函数是通常作用就是Controller与View进行交互设置,通常用于与另一个Controller的功能 - 控制相结合。控制功能可以很容易地监听View的事件,并采取一些action和handler。如果我们要当panel渲染的时候使用Controller来通知我们,代码如下:
这里在init函数的this.control中设置了listeners,就和在View中设置是一样的效果。使用了ext4新的组建选择器,如果你还不熟悉ext4新的选择器,请看博文http://www.yuuzle.com/extjs4-and-jquery-selector-comparison.html
新的refs系统是Controller最有用的功能。通过使用新Ext.ComponentQuery,很容易很方便的找到View中的引用。让我们来看看在现在这样一个例子:
上面的例子refs中定义了选择器“grid”引用名为“list”,在这里就可以使用getList()方法来调用选择器的结果值了
通过指定Model、Store和Controller的关系,再动态加载它们的文件位置(app/model/User.js, app/store/AllUsers.js 和 app/store/AdminUsers.js),并创建他们的getter函数。上面的例子会创建一个新的用户Model实例,并把它添加到ALLUSERS
Store。在这个函数中你可以做任何事情,这里只是做了一些简单的功能演示。
转载地址:http://www.yuuzle.com/extjs4-controller-controller-detailed.html
控制器Controller通常是和application绑定在一起的。它们主要作用是监听事件(通常对view),并采取一些action。下面是我们如何创建一个Controller来管理用户:
Ext.define('MyApp.controller.Users', { extend: 'Ext.app.Controller', init: function() { console.log('Initialized Users! This happens before the Application launch function is called'); } });
init函数是一个特殊的方法,在你的application启动时调用。它是在application的Viewport被创建以前执行的。
init函数是通常作用就是Controller与View进行交互设置,通常用于与另一个Controller的功能 - 控制相结合。控制功能可以很容易地监听View的事件,并采取一些action和handler。如果我们要当panel渲染的时候使用Controller来通知我们,代码如下:
Ext.define('MyApp.controller.Users', { extend: 'Ext.app.Controller', init: function() { this.control({ 'viewport > panel': { render: this.onPanelRendered } }); }, onPanelRendered: function() { console.log('The panel was rendered'); } });
这里在init函数的this.control中设置了listeners,就和在View中设置是一样的效果。使用了ext4新的组建选择器,如果你还不熟悉ext4新的选择器,请看博文http://www.yuuzle.com/extjs4-and-jquery-selector-comparison.html
使用refs
新的refs系统是Controller最有用的功能。通过使用新Ext.ComponentQuery,很容易很方便的找到View中的引用。让我们来看看在现在这样一个例子:Ext.define('MyApp.controller.Users', { extend: 'Ext.app.Controller', refs: [ { ref: 'list', selector: 'grid' } ], init: function() { this.control({ 'button': { click: this.refreshGrid } }); }, refreshGrid: function() { this.getList().store.load(); } });
上面的例子refs中定义了选择器“grid”引用名为“list”,在这里就可以使用getList()方法来调用选择器的结果值了
通常的getter方法
Ext.define('MyApp.controller.Users', { extend: 'Ext.app.Controller', models: ['User'], stores: ['AllUsers', 'AdminUsers'], init: function() { var User = this.getUserModel(), allUsers = this.getAllUsersStore(); var ed = new User({name: 'Ed'}); allUsers.add(ed); } });
通过指定Model、Store和Controller的关系,再动态加载它们的文件位置(app/model/User.js, app/store/AllUsers.js 和 app/store/AdminUsers.js),并创建他们的getter函数。上面的例子会创建一个新的用户Model实例,并把它添加到ALLUSERS
Store。在这个函数中你可以做任何事情,这里只是做了一些简单的功能演示。
转载地址:http://www.yuuzle.com/extjs4-controller-controller-detailed.html
相关文章推荐
- EXTJS4控制器Controller详解
- spring mvc DispatcherServlet详解之一--request通过HandlerMaping获取控制器Controller过程
- 跟我学Kafka之Controller控制器详解(一)
- iOS:图像选取器控制器控件UIImagePickerController的详解
- 详解Asp.Net MVC――控制器与动作(Controller And Action)
- SteamVR插件详解:SteamVR_Controller脚本分析+Vive控制器功能开发
- EXTJS4.x之实战项目(3)菜单控制器MenuPanelController
- 详解PHP的Yii框架中的Controller控制器
- Zend Framework教程之前端控制器Zend_Controller_Front用法详解
- 详解springMVC―三种控制器controller
- Unity SteamVR插件详解一:SteamVR_Controller脚本分析+Vive控制器功能开发
- iOS基础控件-UITabBarController - 2 之UITabBarItem 详解,结合视图控制器和导航控制器的用法
- SteamVR插件详解第二版:SteamVR_Controller脚本分析+Vive控制器功能开发
- 详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
- AngularJS 控制器 controller的详解
- 第四章 Controller接口控制器详解(5)——跟着开涛学SpringMVC
- SteamVR插件详解第二版:SteamVR_Controller脚本分析+Vive控制器功能开发
- Zend Framework教程之前端控制器Zend_Controller_Front用法详解
- 详解PHP的Yii框架中的Controller控制器
- SpringMVC的Controller控制器返回值详解