Ext中事件重写

如何实现ext事件的重写呢?
很自然的,我们肯定是想到要去这样做:先继承一个已有的类,然后在extend的时候,重写我们需要的方法。这样做很好,很有OOP的风格。(请参考[url]http://itren.iteye.com/admin/blogs/255563[/url])但这样做似乎略有繁琐。有没有更好的方式呢?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方法即完成了事件的重写。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值