ExtJS中树形结构级联选中（三态）

阅读更多

在使用ExtJS进行开发时，常常遇到需要用到树形结构Ext.tree.TreePanel,而且经常需要对TreePanel进行级联选中与取消选中，我们的做法无非就是监听checkchange事件进行相应的处理，常用的写法是：

var treePanel = new Ext.tree.TreePanel({
...
listeners : {
'checkchange' : function(){
...
}
}
});

这样做可行吗，答案是肯定的，肯定是可以实现的，只是当你需要多个地方都需要进行级联选中时，你需要拷贝这些代码到需要的地方，这样写代码有些糟糕，复用性太低，也不易于维护，同时，这样写不是很好实现checkbox的三种状态，于是动手写了这样一个插件，实现了树形结构的级联选中与三态，代码如下：

/* 带有CheckBox的树的选中的插件
 * author:jn_nian
 * createTime:2010-10-24 21:46
 * usage: Ext3使用 plugins : ['treecheck']或plugins:[new Ext.ux.TreePanelCheck()]
 * Ext2使用 ：plugins:[new Ext.ux.TreePanelCheck()]
*******************************************************************/
 
 Ext.ux.TreePanelCheck = Ext.extend(Ext.tree.TreePanel,{
 	init : function(treePanel){
 		var rootNode = treePanel.getRootNode();
 		
 		treePanel.on('expandnode',this.doLazyCheck,rootNode);
 		treePanel.on('checkchange',this.handlerCheck,this);
 	},
 	
 	
 	//检查子结点选中的情况
 	doChildHasChecked : function(node){
 		var childNodes = node.childNodes;
		var checkedNum = 0;
		if(childNodes || childNodes.length>0){
			for(var i=0;i 
 
此代码可以在Ext2.x与3.x下正常运行，当你使用Ext3.x时你不需要对此代码作任何改动，当你使用Ext2.x时，请注释掉最后一行代码：Ext.preg('treecheck',Ext.ux.TreePanelCheck); 
 
最终实现效果图如附件中所示 
 
 
  
 
   
 
   
大小: 27 KB
 
  
 
  
 
   
查看图片附件