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

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配置项,修改后的代码如下:

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);
	}
});

      做完以上工作后,接下来就是为我们的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/

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

  1. 小培 说道:

    棒棒的 很好

  2. 冯小刚 说道:

    很好

  3. 作别西天云彩 说道:

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

  4. extjs 说道:

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

  5. break 说道:

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

    • 李坏 说道:

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

      • break 说道:

        直接调试也不行啊!

      • 未入门新手 说道:

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

  6. Adeason 说道:

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

  7. rabow 说道:

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

  8. 独特优惠码 说道:

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