Ext JS4学习教程+笔记（二）事件处理

ExtJS 4采用MVC的方式划分程序，事件响应代码的写法：

1，一般放到controller里面，

假设application里面写了

controllers:[
               'Users'
          ]

则控制器代码放到定义目录的app/controller/Users.js里面，写法如下：

Ext.define("MyApp.controller.User",{
               extend:'Ext.app.Controller',
               requires:['Ext.window.MessageBox'], //这句不加下面的Ext.Msg.alert会出错！

               init:function(){
                    this.control({
                         'treepanel':{
                              itemclick:function(view,record){
                                    Ext.Msg.alert('你点击了',record.get('text')); //打印树节点的名字
                              },

                              itemcontextmenu:function(view,record,item,index, e){   //添加右键菜单

                                   e.preventDefault();  //阻止浏览器事件
                                   e.stopEvent();  //阻止浏览器事件
                                   var nodemenu=new Ext.menu.Menu({
                                         floating:true,
                                        items:[{
                                         text:"新增组织机构",
                                         icon:'images/add.gif',
                                         iconCls:'leaf',
                                         handler:function(){
                                          alert("新增");
                                         }
                                        },{
                                         text:"编辑组织机构",
                                         icon:'images/leaf.gif',
                                         iconCls:'leaf',
                                         handler:function(){
                                          alert("编辑");
                                         }
                                        },{
                                         text:"删除组织机构",
                                         icon:'images/delete.gif',
                                         iconCls:'leaf',
                                         handler:function(){
                                          alert("删除");
                                         }
                                        }]
                                       });
                                     nodemenu.showAt(e.getXY()); //显示在鼠标的位置
                                }
                        
                         },

                         'treepanel2':{

                               itemclick:function(view,record){

                                   alert(Ext.getDisplayName(record));

                              }                        

                         }
                    }
                    );
               }
});

在init方法里面，调用this.control调用事件响应代码，'treepanel'表示Component Query语法，一般用xtype里表示的内容即可。

上述代码同时提供了为itemcontextmenu提供事件处理添加右键菜单的功能。

2，不采用MVC模式的代码，对于Panel, Window等面板，也有一个listeners属性，可以这样加入事件处理：

listeners:{

    itemdblclick:  function (){

        Ext.Msg.alert(  'helo' , 'db clicked'  );

    }

}

3，对于Button等组件，如果是默认的事件(如按钮的click)，也可以直接用handler属性，例如：

handler:function(){

           alert('clicked!');         

     }