这篇文章主要说一下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的搭配使用方法。
分享到:
相关推荐
只要将解压的文件直接放置到myeclipse的webroot下面,启动tomcat访问。简单的EXTJS mvc框架,设计 store,model,controller,view,window等等,同时展示了一些基本的点击显示、修改等等操作,需要的同学自行下载
是用extjs mvc写的,controller里面会配置model store view,然后mode和store的关系,相信大家也很清楚了,store里面会用到model,当然也可以不用,和原来的extjs3.x是一样的,用field来表示,其实是换汤不换药而已...
本工程采用ExtJs4.0 开发,采用mvc开发模式,分为controller view model store。
可以通过动态创建controller的方式,还能遵循mvc设计规范。这个例子完美破解,经过测试。 extjs4.0好像设计上是一个应用对应一个application,所以原先想通过动态加载多个application来实现上面的需求。但是那样会...
Extjs4新推出的MVC模式 研究了几天终于弄明白怎么回事了,写了个例子, 可以实现增删改查, 分步加载controller
本实例采用Extjs4.0 开发,按照mvc模式分为,controller view model store
demo描述: 1. 页面主框架是左是一个tree,右边是一个tablepanel 2. 左边的树是加载主页面的时候动态生成 3. 点击左边的树的节点动态加载...注:需要自己导入Extjs 4.2.x 的文件,该demo是用Extjs 4.2.1 写的
系统可以产生IDAO、DAO、Model、Nhibernate映射文件、IBLL、BLL、Controller、DTO、Extjs、数据库、数据库表,这些都是一步到位的。 用户无需建立用户表、模块表、角色表、新闻发布表,这些系统都会自己建立的。
SpringMVC+ExtJS完美集成(数据传输方式为JSON和model),同时还支持controller页面配置、页面消息可配置(类似于国际化)、intercepter示例。
对于MVC3、Spring.net、NHibernate、ExtJs等单个的技术点使用起来,并不是很复杂,出问题比较多的还是配置相关的问题;下面我们来一步一步的实现4个框架的融合配置;首先我们来谈谈4个框架的各自负责的事情::...
3、业务逻辑层使用模板方法+泛型,只需继承SessionHelper或MDSessionHelper , TDetail>即可。 三、功能介绍 1、机构部门维护:提供企业部门信息新增、修改、删除等管理功能。 2、用户信息维护:维护企业各部门的...
6.1.8 ext.domquery的使用方法 / 249 6.1.9 ext js选择器的总结 / 252 6.2 获取单一元素:ext.dom.element / 252 6.2.1 从错误开始 / 252 6.2.2 使用ext.get获取元素 / 253 6.2.3 使用ext.fly获取元素 / 256 ...
不再使用ExtJs模块加载器,替换使用导入和导出约会和转换模块,并使用rollup.js将所有js文件打包。删除不符合时代潮流的经典风格,专注于现代风格,并修改cs尝试向Google物料设计风格靠拢。所有图标不再使用图片,...
需要注意的是,生成的EXTjs 是商业体验版本,如果你购买了,那么你需要下载ext js的zip包,并且使用-SDK命令来制定SDK的路径,这样,就不会去默认下载SDK而是按照你本地的文件来生成了。 命令如下: sencha -sdk /...
本文以MVC模型为架构,ExtJS组件为基础,数据存储(Store)为数据容器,构建了MVCS (Model-View-Controller-Store)模型,并以书籍信息系统为例,说明使用该模型完成组件化手机Web前端设计的方法和实现步骤,展示了...