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

来源：互联网发布：汉诺塔递归算法干嘛的编辑：程序博客网时间：2024/05/21 05:09

通过ExtJS MVC案例系列教程的前三讲，我们基本实现了MVC模式布局ExtJS项目的目的，并且在浏览器中也可以看到最为常见的网页布局结构。但是，作为WEB开发者，并不是能够实现网页布局就算是完成任务了，我们还需要实现一定的功能。在这一讲中，我们将实现当点击ExtJS菜单节点的时候，网页主题部分显示相对应的内容。

到目前为止，我们的文件结构：

本讲我们不会添加新的文件，只是对原来的文件进行修改即可。前面我们说过，控制器的主要作用是监听事件，控制逻辑。所以，我们今天主要修改demoController.js这个文件，为我们的项目添加切换页面的功能。目前我们demoController.js文件的代码为：

1Ext.define('Demo.controller.demoController', {
2    extend:'Ext.app.Controller',
3    views: ['Viewport','menuTree'],
4    stores: ['menuStore'],
5    model: ['menuModel']
6});

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

1Ext.define('Demo.controller.demoController', {
2    extend:'Ext.app.Controller',
3    views: ['Viewport','menuTree'],
4    stores: ['menuStore'],
5    model: ['menuModel'],
6    //通过init函数来监听视图事件，控制视图与控制器的交互
7    init:function() {
8        //init函数通过this.control来负责监听
9        this.control({
10                        //被监听的组件的别名
11            'menutree': {
12                //监听鼠标点击事件，点击后调用changePage方法
13                itemclick:this.changePage,
14            }
15        });
16    },
17    changePage:function(){
18        alert('success');
19    }
20});

刷新页面，点击菜单几点，弹出success说明我们监听事件成功。下面我们继续修改changePage方法，实现对主体内容部分页面的切换功能。demoController.js代码如下：

1Ext.define('Demo.controller.demoController', {
2    extend:'Ext.app.Controller',
3    views: ['Viewport','menuTree'],
4    stores: ['menuStore'],
5    model: ['menuModel'],
6    //通过init函数来监听视图事件，控制视图与控制器的交互
7    init:function() {
8        //init函数通过this.control来负责监听
9        this.control({
10            //被监听的组件的别名
11            'menutree': {
12                //监听鼠标点击事件，点击后调用changePage方法
13                itemclick:this.changePage,
14            }
15        });
16    },
17    changePage:function(view, rec, item, index, e){
18        //获取url地址
19        var url = rec.get('url');
20        //获取当前节点信息
21        var title = rec.get('text');
22        //将主体内容部分的url地址指定为我们获取到的url
23        Ext.getDom('contentIframe').src = url;
24        //将主体内容框的标题设置为我们获取的节点信息
25        Ext.getCmp('mainContent').setTitle(title);
26    }
27});

通过对changePage方法的修改，刷新页面，当我们再次点击节点的时候，右侧主体内容部分将显示对应url的页面信息，大功告成。
今天我们实现了页面切换的功能，下一讲我们将讲解如何实现右键菜单。

0 0