http://serc.eng.usm.my/?business-plan-writers-dubai       通过ExtJS MVC案例系列教程的前三讲,我们基本实现了MVC模式布局ExtJS项目的目的,并且在浏览器中也可以看到最为常见的网页布局结构。但是,作为WEB开发者,并不是能够实现网页布局就算是完成任务了,我们还需要实现一定的功能。在这一讲中,我们将实现当点击ExtJS菜单节点的时候,网页主题部分显示相对应的内容。
      到目前为止,我们的文件结构:
ExtJS MVC模式案例
      本讲我们不会添加新的文件,只是对原来的文件进行修改即可。前面我们说过,控制器的主要作用是监听事件,控制逻辑。所以,我们今天主要修改demoController.js这个文件,为我们的项目添加切换页面的功能。目前我们demoController.js文件的代码为:

follow Ext.define('Demo.controller.demoController', { extend: 'Ext.app.Controller', views: ['Viewport','menuTree'], stores: ['menuStore'], model: ['menuModel'] });

      首先我们需要对menuTree组件的鼠标点击事件进行监听,修改后的代码:

go to link Ext.define('Demo.controller.demoController', { extend: 'Ext.app.Controller', views: ['Viewport','menuTree'], stores: ['menuStore'], model: ['menuModel'], //通过init函数来监听视图事件,控制视图与控制器的交互 init: function() { //init函数通过this.control来负责监听 this.control({ //被监听的组件的别名 'menutree': { //监听鼠标点击事件,点击后调用changePage方法 itemclick: this.changePage, } }); }, changePage:function(){ alert('success'); } });

http://historia-sportu.cba.pl/?greg-hyslop-phd-thesis       刷新页面,点击菜单几点,弹出success说明我们监听事件成功。下面我们继续修改changePage方法,实现对主体内容部分页面的切换功能。demoController.js代码如下:

Ext.define('Demo.controller.demoController', { extend: 'Ext.app.Controller', views: ['Viewport','menuTree'], stores: ['menuStore'], model: ['menuModel'], //通过init函数来监听视图事件,控制视图与控制器的交互 init: function() { //init函数通过this.control来负责监听 this.control({ //被监听的组件的别名 'menutree': { //监听鼠标点击事件,点击后调用changePage方法 itemclick: this.changePage, } }); }, changePage:function(view, rec, item, index, e){ //获取url地址 var url = rec.get('url'); //获取当前节点信息 var title = rec.get('text'); //将主体内容部分的url地址指定为我们获取到的url Ext.getDom('contentIframe').src = url; //将主体内容框的标题设置为我们获取的节点信息 Ext.getCmp('mainContent').setTitle(title); } });

Cheap Assignment Help Uk       通过对changePage方法的修改,刷新页面,当我们再次点击节点的时候,右侧主体内容部分将显示对应url的页面信息,大功告成。
      今天我们实现了页面切换的功能,下一讲我们将讲解如何实现右键菜单。
http://syracuse.lambdaphiepsilon.com/jstor-research-papers/ 欢迎各位留言交流,共同进步!

如非特殊说明,文章均为ITLee原创,转载请注明原文地址: http://www.lihuai.net/qianduan/extjs/491.html/

【技术交流,欢迎大家拍砖】

还没有评论哦!