ExtJS学习：MVC模式案例（五）

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

01	Ext.define('Demo.view.contextMenu', {

02	extend: 'Ext.menu.Menu',

03	alias: 'widget.contextmenu',

04	float: true,

05

items: [{

06	xtype: 'button',

07	text: '添加',

08	action: 'add',

09	iconCls: 'leaf'

10

}, {

11	xtype: 'button',

12	text: '删除',

13	action: 'del',

14	iconCls: 'leaf'

15

}, {

16	xtype: 'button',

17	text: '编辑',

18	action: 'edit',

19	iconCls: 'leaf'

20

}]

21

});

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

01	Ext.define('Demo.controller.demoController', {

02	extend: 'Ext.app.Controller',

03	//这次的修改在这里，给view配置项添加“contextMenu”

04	views: ['Viewport','menuTree','contextMenu'],

05	stores: ['menuStore'],

06	model: ['menuModel'],

07	//通过init函数来监听视图事件，控制视图与控制器的交互

08	init: function() {

09	//init函数通过this.control来负责监听

10	this.control({

11	//被监听的组件的别名

12	'menutree': {

13	//监听鼠标点击事件，点击后调用changePage方法

14	itemclick: this.changePage,

15

}

16

});

17

},

18	changePage:function(view, rec, item, index, e){

19

//获取url地址

20	var url = rec.get('url');

21	//获取当前节点信息

22	var title = rec.get('text');

23	//将主体内容部分的url地址指定为我们获取到的url

24	Ext.getDom('contentIframe').src = url;

25	//将主体内容框的标题设置为我们获取的节点信息

26	Ext.getCmp('mainContent').setTitle(title);

27

}

28

});

      做完以上工作后，接下来就是为我们的menuTree组件添加右键监听事件了，修改控制器文件demoController.js：

01	Ext.define('Demo.controller.demoController', {

02	extend: 'Ext.app.Controller',

03	views: ['Viewport','menuTree','contextMenu'],

04	stores: ['menuStore'],

05	model: ['menuModel'],

06	//通过init函数来监听视图事件，控制视图与控制器的交互

07	init: function() {

08	//init函数通过this.control来负责监听

09	this.control({

10	//被监听的组件的别名

11	'menutree': {

12	//监听鼠标点击事件，点击后调用changePage方法

13	itemclick: this.changePage,

14	//监听鼠标右键事件，点击后调用contextMenu方法

15	itemcontextmenu: this.contextMenu

16

}

17

});

18

},

19

//页面切换方法

20	changePage:function(view, rec, item, index, e){

21

//获取url地址

22	var url = rec.get('url');

23	//获取当前节点信息

24	var title = rec.get('text');

25	//将主体内容部分的url地址指定为我们获取到的url

26	Ext.getDom('contentIframe').src = url;

27	//将主体内容框的标题设置为我们获取的节点信息

28	Ext.getCmp('mainContent').setTitle(title);

29

},

30	//显示右键菜单方法

31	contextMenu:function(tree, record, item, index, e, eOpts){

32	//阻止浏览器默认右键事件

33	e.preventDefault();

34	e.stopEvent();

35

//显示右键菜单

36	var view = Ext.widget('contextmenu');

37	view.showAt(e.getXY());

38

}

39

40

});

      在demoController.js文件中添加以上代码后，刷新页面，在菜单节点上点击右键，看到如下效果图：

      现在，我们整个案例教程就结束了，虽然还有很多功能没实现，如果继续扩展的话，怕是永远也讲不完了，呵呵，主要目的还是为ExtJS的新手们起一个引导的作用，希望对大家有所帮助。