Ext中事件重写

        如何实现ext事件的重写呢？
        很自然的，我们肯定是想到要去这样做：先继承一个已有的类，然后在extend的时候，重写我们需要的方法。这样做很好，很有OOP的风格。（请参考http://itren.iteye.com/admin/blogs/255563）但这样做似乎略有繁琐。有没有更好的方式呢？of course！
        我们可以用到prototype方式来完成，同时不必再继承一个类了。譬如说，我们有一棵树，我们为叶子节点绑定了双击事件，但我们想要重写该树叶子节点的双击方法则需要添加一些代码了。
        首先，这里有一棵普通的绑定了双击事件的树。

 Ext.onReady(function(){  
     var Tree = Ext.tree;  
       
     var tree = new Tree.TreePanel({  
         el:'tree-div',  
         useArrows:true,  
         autoScroll:true,  
         animate:true,  
         enableDD:true,  
         containerScroll: true,   
         loader: new Tree.TreeLoader({  
             dataUrl: 'get-nodes.php'  
         })  
     });  
   
     // 设置根节点  
     var root = new Tree.AsyncTreeNode({  
         text: 'Ext JS',  
         draggable:false,  
         id:'source'  
     });  
     /** 
         绑定该事件，双击树节点时弹出“哈哈” 
     */  
     root.on("dblclick", function(){  
         alert("哈哈")  
     })  
   
     tree.setRootNode(root);  
   
     tree.render();  
     root.expand();  
 }); 

        在这棵树中，我们双击叶子节点，会弹出“哈哈”的警告框。如果要修改该双击事件的方法。则应该如下：

  Ext.tree.TreeNodeUI.prototype.onDblClick = function(e){  
     /** 
         重写该方法，每双击一个节点树时弹出一个消息框 
     */  
     alert('Ext.tree.TreeNodeUI.prototype.onDblClick');  
       
     e.preventDefault();  
     if(this.disabled){  
         return;  
     }  
     if(this.checkbox){  
         this.toggleCheck();  
     }  
     if(!this.animating && this.node.hasChildNodes()){  
         this.node.toggle();  
     }  
     this.fireEvent("dblclick", this.node, e);  
  }  
   
 Ext.onReady(function(){  
     var Tree = Ext.tree;  
       
     var tree = new Tree.TreePanel({  
         el:'tree-div',  
         useArrows:true,  
         autoScroll:true,  
         animate:true,  
         enableDD:true,  
         containerScroll: true,   
         loader: new Tree.TreeLoader({  
             dataUrl: 'get-nodes.php'  
         })  
     });  
   
     // 设置根节点
     var root = new Tree.AsyncTreeNode({  
         text: 'Ext JS',  
         draggable:false,  
         id:'source'  
     });  
     /** 
         绑定该事件，双击树节点时弹出“哈哈” 
     */  
     root.on("dblclick", function(){  
         alert("哈哈")  
     })  
   
     tree.setRootNode(root);  
   
     tree.render();  
     root.expand();  
 });

        其中Ext.tree.TreeNodeUI 代表树中的一个节点，其实例负责和用户交互，我们重写它的onDblClick方法即完成了事件的重写。

评论

1 楼 Allan0815 2012-10-25  

        

引用

[*]

[img][/img]