ExtJS MVC 学习手记3

在演示应用中,我们已经创建好了viewport,并为之添加了一个菜单树。但也仅仅是这样,点击树或应用的其他地方获得不到任何响应。这个演示应用还是一个死的应用。

接下来,我们让这个应用活起来。

首先,给树添加一个点击事件。以前的做法是使用listener属性,添加事件监听及处理函数。现在的做法也是采用了类似的方法,修改MenuController.js:

Ext.define('demo.controller.MenuController', {
    extend: 'Ext.app.Controller',
    
    stores: ['MenuStore'],
    model: ['MenuModel'],
    views: ['TreeMenu'],
    
    init: function(){
        this.control({
            'treemenu' : {
                itemclick: this.treeHandle
            }
        });
    },
    
    treeHandle: function(view, record){
        alert(record.data.text);
    }
    
});

我们使用了controller的init函数。init函数在应用启动时就开始执行,通常它会和control函数一起使用来实现事件的监听和处理。在control函数中我们再次使用了选择器以找到要添加事件的对象。

点击树的节点,效果如下:

image

实现了事件的响应还不够。在平时的开发中经常需要实现的功能是:点击左侧菜单,在右侧内容面板中做出适当响应。

为了实现这个目标,我们先对json数据及model做些调整。

修改后的menu.json:

{
            children: [{
                         id: 1,
                           text: '用户管理',
                         leaf: false,
                         expanded: true,
                           children: [{
                                           id: 11,
                                           pid: 1,
                                           text: '角色管理',
                                           leaf: true
                                       },{
                                           id: 12,
                                           pid: 1,
                                           text: '信息管理',
                                           leaf: true
                                       }]
                      },{
                           id: 2,
                           text: '系统管理',
                         leaf: false,
                         expanded: true,
                           children: [{
                                           id: 21,
                                           pid: 2,
                                           text: '数据字典管理',
                                           leaf: true
                                       },{
                                           id: 22,
                                           pid: 2,
                                           text: '日志管理',
                                           leaf: true
                                       }]
                      }]    
          }

我们在json数据中添加了id和pid属性。相应的model也要做出调整。MenuModel.js:

Ext.define('demo.model.MenuModel', {
    extend: 'Ext.data.Model',
    
    fields: ['id', 'pid', 'text', 'leaf']
});

再添加一个内容视图Content.js:

Ext.define('demo.view.Content', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.content',

    title: '系统内容',
    margins: '5 5 5 0',
    
    layout: 'form',
    defaults: {xtype: 'displayfield', labelAlign:'right', labelWidth:120}
});

接下来,继续对MenuController作出调整:

Ext.define('demo.controller.MenuController', {
    extend: 'Ext.app.Controller',
    
    stores: ['MenuStore'],
    model: ['MenuModel'],
    views: ['TreeMenu'],
    
    refs: [{, selector:'content'}],
    
    init: function(){
        this.control({
            'treemenu' : {
                itemclick: this.treeHandle
            }
        });
    },
    
    treeHandle: function(view, record){
        
        content.removeAll();
        content.add({
                        fieldLabel: 'ID',
                        value: record.data.id
                    },{
                        fieldLabel: 'TEXT',
                        value: record.data.text
                    });
    }
    
});

 

调整的地方有两处:使用了refs属性,修改了点击事件响应函数treeHandle。需要说明下的是refs属性。使用refs属性可以获取对象的引用。在上面的配置中“refs: [{ref:'content', selector:'content'}]”产生了一个getContent()方法,这个方法会去寻找选择器‘content’对应的对象。

 

看一下运行效果:

image

点击左侧的菜单树,在右侧的内容面板中会有相应的提示。

效果还是很简单。不过了解了这些,应该可以自己动手去实现应用了。

关于MVC的学习手记可以于此告终了。

 

项目代码下载:http://download.csdn.net/detail/tianxiexingyun/7405471

转载于:https://www.cnblogs.com/amunote/p/3754204.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值