到目前为止,我们ExtJS MVC案例系列教程已经进行了四讲,在这四讲中我们通过ExtJS的MVC模式实现了网页的布局以及页面的切换功能。今天我们主要实现右键菜单的功能,这也是我们整个案例教程的最后一讲,由于ITLee也是ExtJS的初雪者,写这些文章对那些有过ExtJS开发经验的人来说并没有什么实际意义,主要是希望对ExtJS的初学者起到抛砖引玉的作用。
      要实现右键菜单的功能,首先我们需要添加一个菜单组件,在view文件夹中新建contextMenu.js文件,该文件中添加以下代码:

http://www.ladyofthebarn.com/methodology-for-thesis/ Ext.define('Demo.view.contextMenu', { extend: 'Ext.menu.Menu', alias: 'widget.contextmenu', float: true, items: [{ xtype: 'button', text: '添加', action: 'add', iconCls: 'leaf' }, { xtype: 'button', text: '删除', action: 'del', iconCls: 'leaf' }, { xtype: 'button', text: '编辑', action: 'edit', iconCls: 'leaf' }] });

      正如我们前面所说的,添加组件后需要在控制器中进行加载,否则ExtJS的自动加载机制将不能找到我们的文件,下面修改demoController.js文件的view配置项,修改后的代码如下:

http://assendared.com/professional-resume-writing-services-brisbane/ professional resume writing services brisbane Ext.define('Demo.controller.demoController', { extend: 'Ext.app.Controller', //这次的修改在这里,给view配置项添加“contextMenu” views: ['Viewport','menuTree','contextMenu'], 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); } });

http://www.millionaireagentmakersummit.com/best-site-to-buy-a-research-paper/ Best Site To Buy A Research Paper       做完以上工作后,接下来就是为我们的menuTree组件添加右键监听事件了,修改控制器文件demoController.js:

Ext.define('Demo.controller.demoController', { extend: 'Ext.app.Controller', views: ['Viewport','menuTree','contextMenu'], stores: ['menuStore'], model: ['menuModel'], //通过init函数来监听视图事件,控制视图与控制器的交互 init: function() { //init函数通过this.control来负责监听 this.control({ //被监听的组件的别名 'menutree': { //监听鼠标点击事件,点击后调用changePage方法 itemclick: this.changePage, //监听鼠标右键事件,点击后调用contextMenu方法 itemcontextmenu: this.contextMenu } }); }, //页面切换方法 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); }, //显示右键菜单方法 contextMenu:function(tree, record, item, index, e, eOpts){ //阻止浏览器默认右键事件 e.preventDefault(); e.stopEvent(); //显示右键菜单 var view = Ext.widget('contextmenu'); view.showAt(e.getXY()); } });

      在demoController.js文件中添加以上代码后,刷新页面,在菜单节点上点击右键,看到如下效果图:
ExtJS mvc模式案例图
      现在,我们整个案例教程就结束了,虽然还有很多功能没实现,如果继续扩展的话,怕是永远也讲不完了,呵呵,主要目的还是为ExtJS的新手们起一个引导的作用,希望对大家有所帮助。
欢迎各位浏览交流,共同进步!

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

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

取消回复

  1. 小培 说道:

    棒棒的 很好

  2. 冯小刚 说道:

    很好

  3. 作别西天云彩 说道:

    老师的个人博客挺好,分享的内容循序渐进看后一目了然,就是不可以收藏帖子和注册用户,期待更强大的博客系统,分享是一种快乐,顶起。

  4. extjs 说道:

    感谢楼主分享~ 成功了 非常开心

  5. break 说道:

    楼主好人,按你说的步骤做了,没有报错,但是树不会显示啊!

    • 李坏 说道:

      可能你哪儿写的不对吧,直接调试源码可以调通吗?

      • break 说道:

        直接调试也不行啊!

      • 未入门新手 说道:

        请问 跳转地址 老是读取为空,而且树按照上面的代码也不能显示,只能稍作修改才能显示

  6. Adeason 说道:

    实现了,很好的,学到很多东西,希望能断续出一些新手的东西,新手不易啊。还希望有机会能得到您的指导

  7. rabow 说道:

    希望楼主能够分享一下源码啊~~

  8. 独特优惠码 说道:

    这一系列文章,慢慢看咯。。。