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!');         

     }