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