ExtJS의 트리 구조 레벨 연결 선택(3 상태)

ExtJS를 사용하여 개발할 때 트리 구조인 Ext.tree를 사용해야 하는 경우가 많습니다.TreePanel, 그리고 TreePanel에 대한 등급 연결 선택과 선택 취소가 자주 필요합니다. 저희의 방법은 checkchange 이벤트를 감청하여 상응하는 처리를 하는 것입니다. 자주 사용하는 방법은 다음과 같습니다.

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

이렇게 하면 되겠습니까? 답은 확실합니다. 틀림없이 실현할 수 있습니다. 다만 여러 군데에서 등급 연결을 해야 할 때 이 코드를 필요한 곳으로 복사해야 합니다. 이렇게 코드를 쓰는 것은 좀 엉망입니다. 복용성이 너무 낮고 유지하기도 쉽지 않습니다. 그리고 이렇게 쓰는 것은 체크박스의 세 가지 상태를 실현하기 좋지 않습니다. 그래서 이런 플러그인을 사용해서 트리 구조의 등급 연결과 세 가지 상태를 실현했습니다.코드는 다음과 같습니다.

/*  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<childNodes.length;i++){
				if(childNodes[i].getUI().checkbox.checked){
    				checkedNum = checkedNum + 1;
				}
			}
		}
		return checkedNum;
 	},
 	
 	// 
 	doParentCheck : function(node ,checked){
 		var checkbox = node.getUI().checkbox;
		if(typeof checkbox == 'undefined') return false;
		node.getUI().checkbox.indeterminate = false;
		node.getUI().checkbox.checked = checked;
		
		node.attributes.checked = checked;
		var childChecked = this.doChildHasChecked(node);
		if(childChecked == node.childNodes.length){
			node.getUI().checkbox.checked = true;
			node.getUI().checkbox.indeterminate = false;
		}else if(childChecked == 0){
			var indeterminate = false;
			node.eachChild(function(child){     
	        	if(child.getUI().checkbox.indeterminate){
	        		indeterminate = true;
	        		return false;
	        	}
	        }); 
			node.getUI().checkbox.checked = false;
			node.getUI().checkbox.indeterminate = indeterminate;
		}else{
			node.getUI().checkbox.checked = false;
			node.getUI().checkbox.indeterminate = true; // 
		}
		
		node.getOwnerTree().fireEvent('check', node, checked);
		var parentNode = node.parentNode;
		if( parentNode !== null){
			this.doParentCheck(parentNode,checked);
		}
 	},
 	
 	handlerCheck : function(node,checked){
 		var parentNode = node.parentNode;
        if(!Ext.isEmpty(parentNode)) {   
        	this.doParentCheck(parentNode,checked);   
        }
        node.attributes.checked = checked;
//		node.expandChildNodes(true);
        node.eachChild(function(child){     
        	child.ui.toggleCheck(checked);    
            child.attributes.checked = checked;     
            child.fireEvent('checkchange', child, checked);
        });
 	},
 	
 	// 
 	doLazyCheck : function(node){
 		if(!Ext.isEmpty(node.parentNode)){
			var nodeChecked = node.getUI().checkbox.checked;
			//node.expandChildNodes(true);
			node.eachChild(function(child){
				child.getUI().checkbox.checked = nodeChecked;
			});
		}
 	},
 	
 	getPType : function(){
 		return this.ptype;
 	}
 });
 Ext.preg('treecheck',Ext.ux.TreePanelCheck);

이 코드는 Ext2에서 사용할 수 있습니다.x와 3.x에서 Ext3를 사용하면 정상적으로 실행됩니다.x시 이 코드를 변경할 필요가 없습니다. Ext2를 사용할 때입니다.x시, 마지막 줄 코드를 주석해 주십시오: Ext.preg('treecheck', Ext.ux.TreePanelCheck);
최종 구현 효과 그림은 첨부 파일에서 보듯이