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: [{, selector:'content'}],init: function(){this.control({'treemenu' : {itemclick: this.treeHandle}});},treeHandle: function(view, record){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

转载于:https://www.cnblogs.com/amunote/p/3754204.html

ExtJS MVC 学习手记3相关推荐

ExtJS MVC学习手记 1
开发环境: ExtJS4.2 eclipse indigo 开发目标搭建项目框架,创建viewport 开发步骤说明这次主要使用extjs4的mvc模式创建viewport.籍此初步了解mvc模 ...
MVC 学习日志1（上）
MVC 学习日志1(上) 2012.7.5 开始学习MVC,本以为这个框架多难学,学下来的感受是其实也就是编写格式而已,和普通的webform有质的区别.顿时理解那句老话,世上无难事,只怕有心人.只要 ...
Extjs——初步学习
最近在系统学习Extjs框架,从刚一开始接触Extjs到现在发现对Extjs越来越喜欢了.刚开始只是想在页面上实现一个展示大量图片的功能,就像在线订餐系统展示菜单的效果那样,每幅图片上都有一些 ...
Spring MVC 学习笔记对locale和theme的支持
Spring MVC 学习笔记对locale和theme的支持 Locale Spring MVC缺省使用AcceptHeaderLocaleResolver来根据request header中的 ...
AM335X的汇编语言与c语言,X86汇编语言学习手记 -- 汇编和C协同
X86汇编语言学习手记(3) 2004年12月在X86汇编语言学习手记(1)(2)中,可以看到栈(Stack)作为进程执行过程中数据的临时存储区域,通常包含如下几类数据: 局部变量函数调用的返回地 ...
Spring MVC 学习总结（二）——控制器定义与@RequestMapping详解
Spring MVC 学习总结(二)--控制器定义与@RequestMapping详解目录一.控制器定义 1.1.实现接口Controller定义控制器 1.2.使用注解@Controller定义 ...
webpack入门学习手记（一）
本人微信公众号:前端修炼之路,欢迎关注. 之前用过gulp.grunt,但是一直没有学习过webpack.这两天刚好有时间,学习了下webpack.webpack要想深入研究,配置的东西比较多,网上的 ...
ROS学习手记 - 2.1: Create and Build ROS Package 生成包（Python）
ROS学习手记 - 2.1: Create and Build ROS Package 生成包(Python) ROS学习手记 - 2.1: Create and Build ROS Package ...
Spring MVC 学习总结（九）——Spring MVC实现RESTful与JSON（Spring MVC为前端提供服务）...
Spring MVC 学习总结(九)--Spring MVC实现RESTful与JSON(Spring MVC为前端提供服务) 目录一.JSON 1.1.概要 1.2.使用ModelAndView ...

ExtJS MVC 学习手记3

ExtJS MVC 学习手记3相关推荐

最新文章

热门文章