ExtJS MVC 学习手记3

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

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

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

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

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

点击树的节点，效果如下：

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

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

修改后的menu.json:

{
            children: [{
                         id: 1falsetrue1
                                       },{
                                           id: 12
                                       }]
                      },{
                           id: 221'数据字典管理''日志管理'
                                       }]
                      }]    
          }

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

Ext.define('demo.model.MenuModel''id','pid','text','leaf']
});

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

Ext.define('demo.view.Content''widget.content''5 5 5 0''displayfield',labelAlign:'right',labelWidth:120}
});

接下来，继续对MenuController作出调整：

Ext.define('demo.controller.MenuController'ref:'content',selector:'content'}],record){
        var content = this.getContent();
        content.removeAll();
        content.add({
                        fieldLabel: 'ID'

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

看一下运行效果：

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

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

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

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

ExtJS MVC 学习手记3

相关文章