ExtJS MVC 学习手记3
在演示应用中,我们已经创建好了viewport,并为之添加了一个菜单树。但也仅仅是这样,点击树或应用的其他地方获得不到任何响应。这个演示应用还是一个死的应用。
接下来,我们让这个应用活起来。
首先,给树添加一个点击事件。以前的做法是使用listener属性,添加事件监听及处理函数。现在的做法也是采用了类似的方法,修改MenuController.js:
Ext.define('demo.controller.MenuController', {
extend: 'Ext.app.Controller', stores: ['MenuStore'],
model: ['MenuModel'],
views: ['TreeMenu'], init: function(){
this.control({
'treemenu' : {
itemclick: this.treeHandle
}
});
}, treeHandle: function(view, record){
alert(record.data.text);
} });
我们使用了controller的init函数。init函数在应用启动时就开始执行,通常它会和control函数一起使用来实现事件的监听和处理。在control函数中我们再次使用了选择器以找到要添加事件的对象。
点击树的节点,效果如下:
实现了事件的响应还不够。在平时的开发中经常需要实现的功能是:点击左侧菜单,在右侧内容面板中做出适当响应。
为了实现这个目标,我们先对json数据及model做些调整。
修改后的menu.json:
{
children: [{
id: 1,
text: '用户管理',
leaf: false,
expanded: true,
children: [{
id: 11,
pid: 1,
text: '角色管理',
leaf: true
},{
id: 12,
pid: 1,
text: '信息管理',
leaf: true
}]
},{
id: 2,
text: '系统管理',
leaf: false,
expanded: true,
children: [{
id: 21,
pid: 2,
text: '数据字典管理',
leaf: true
},{
id: 22,
pid: 2,
text: '日志管理',
leaf: true
}]
}]
}
我们在json数据中添加了id和pid属性。相应的model也要做出调整。MenuModel.js:
Ext.define('demo.model.MenuModel', {
extend: 'Ext.data.Model', fields: ['id', 'pid', 'text', 'leaf']
});
再添加一个内容视图Content.js:
Ext.define('demo.view.Content', {
extend: 'Ext.panel.Panel',
alias: 'widget.content', title: '系统内容',
margins: '5 5 5 0', layout: 'form',
defaults: {xtype: 'displayfield', labelAlign:'right', labelWidth:120}
});
接下来,继续对MenuController作出调整:
Ext.define('demo.controller.MenuController', {
extend: 'Ext.app.Controller', stores: ['MenuStore'],
model: ['MenuModel'],
views: ['TreeMenu'], refs: [{ref:'content', selector:'content'}], init: function(){
this.control({
'treemenu' : {
itemclick: this.treeHandle
}
});
}, treeHandle: function(view, record){
var content = this.getContent();
content.removeAll();
content.add({
fieldLabel: 'ID',
value: record.data.id
},{
fieldLabel: 'TEXT',
value: record.data.text
});
} });
调整的地方有两处:使用了refs属性,修改了点击事件响应函数treeHandle。需要说明下的是refs属性。使用refs属性可以获取对象的引用。在上面的配置中“refs: [{ref:'content', selector:'content'}]”产生了一个getContent()方法,这个方法会去寻找选择器‘content’对应的对象。
看一下运行效果:
点击左侧的菜单树,在右侧的内容面板中会有相应的提示。
效果还是很简单。不过了解了这些,应该可以自己动手去实现应用了。
关于MVC的学习手记可以于此告终了。
项目代码下载:http://download.csdn.net/detail/tianxiexingyun/7405471
ExtJS MVC 学习手记3的更多相关文章
- ExtJS MVC学习手记
开始学习ExtJS的MVC了.这篇文章仅是用来做一个目录,为自己这个阶段的学习内容做个索引. 手记涉及的文章: EXTJS MVC结构(译自ExtJS4.0文档中的<MVC Architectu ...
- ExtJS MVC学习手记 2
开发环境 eclipse(indigo) ExtJS4.0 开发目标 使用store.model和controller创建菜单树 开发步骤 之前我们已经建立了一个MVC的项目框架.现在要做的就是在这个 ...
- ExtJS MVC学习手记 1
开发环境: ExtJS4.2 eclipse indigo 开发目标 搭建项目框架,创建viewport 开发步骤说明 这次主要使用extjs4的mvc模式创建viewport.籍此初步了解mvc模 ...
- Extjs MVC学习随笔01
Extjs Mvc模式下的整个MVC框架体系即下图: 包含了Controller(实现方法层),Store(数据来源管理层),View(页面布局层).之所以用MVC我想是因为减轻针对某一页面的单一的J ...
- Linux.NET学习手记(7)
前一篇中,我们简单的讲述了下如何在Linux.NET中部署第一个ASP.NET MVC 5.0的程序.而目前微软已经提出OWIN并致力于发展VNext,接下来系列中,我们将会向OWIN方向转战. 早在 ...
- Linux.NET学习手记(8)
上一回合中,我们讲解了Linux.NET面对OWIN需要做出的准备,以及介绍了如何将两个支持OWIN协议的框架:SignalR以及NancyFX以OwinHost的方式部署到Linux.NET当中.这 ...
- EF框架学习手记
转载: [ASP.NET MVC]: - EF框架学习手记 1.EF(Entity Framework)实体框架EF是ADO.NET中的一组支持开发面向数据的软件应用程序的技术,是微软的一个ORM框架 ...
- Extjs MVC模式开发,循序渐进(一)
本文讲述extjs mvc的Helloworld,tabPanel,event,页面布局layout等内容. 本页包含:MVC模式案例(一)~MVC模式案例(六),从搭建extjs mvc到点击按钮生 ...
- .NET MVC 学习笔记(二)— Bootstrap框架
二..NET MVC 学习笔记(一)—— Bootstrap框架 在实际开发过程中,页面的样式问题是让人很头疼的问题,良好的用户界面可以大大提高用户体检,而在你没有前端开发人员的火力支援情况下,并不是 ...
随机推荐
- EXE中释放文件
今天有个朋友问到VC能否释放多个EXE.DLL或WAV等文件,我便做了个实例给他. (注意:以下释放资源代码是不受文件扩展名所限制的,你可以释放更多类型文件) 下面是我写了个很方面的函数给大家用! 1 ...
- 在jQuery和JavaScript中,实现转跳
隐藏转跳,浏览器不产生历史记录(replace).代码片段: window.location.replace("http://insus.cnblogs.com"); 当然我们还不 ...
- Linux内核中ioremap映射的透彻理解
几乎每一种外设都是通过读写设备上的寄存器来进行的,通常包括控制寄存器.状态寄存器和数据寄存器三大类,外设的寄存器通常被连续地编址.根据CPU体系结构的不同,CPU对IO端口的编址方式有两种: (1)I ...
- 关于web前端开发
刚接触前端,有很多不了解,一个table都搞了很久. 记录一些简单内容为日后查看. div是创建了一块块区域,而css则负责具体的展示用的包括位置的调整,块的展示.其实一个html页面中,一个tabl ...
- iOS 微信支付平台集成
https://pay.weixin.qq.com/wiki/doc/api/app.php?chapter=8_5
- 使用eclipse与jLink V8调试exynos 4412 u-boot
/** ****************************************************************************** * @author Maox ...
- vim 文字插入
我们知道VIM中,普通的复制和粘贴都是YY和PP.那么怎么将vim以外的文件插入到vim编辑器中呢!这是个问题: 首先我们要选中想要插入的文字,如: 然后进入vim插入模式:SHIFT + Inser ...
- 小菜的系统框架界面设计-灰姑娘到白雪公主的蜕变(工具条OutLookBar)
灰姑娘本身也有自已的优点,但是却可能因为外貌不讨人喜欢,要变成白雪公主却需要有很多勇气和决心去改变自已: 有一颗善良的心 讨人喜爱的外貌 --蜕变--> 我这里讲的是一个工具条的蜕变过程, ...
- dispatchTouchEvent & onInterceptTouchEvent & onTouchEvent
http://www.cnblogs.com/jqyp/archive/2012/04/25/2469758.html dispatchTouchEvent 分发 onInterceptT ...
- scala学习笔记1
一.REPL scala解释器读到一个表达式,对它进行求值,将它的打印出来,接着再继续读下一个表达式.这个过程被称作 读取-打印-循环,即REPL. 从技术上讲,scala程序并不是一个解释器.实际发 ...