Ext TreePanel은 단일 선택 기능을 제공합니다.

인용하다
ext1.x에서 나무는 체크박스가 없습니다. 다행히도 2.X 버전에서 이 기능을 제공했는데, 많은 응용 프로그램에서checkbox가 있는 트리 사용은 여전히 매우 흔하다
Ext2.X는 간단한 checkbox 구현을 제공하지만 몇 가지 복잡한 수요, 예를 들어 등급 연결 다중 선택(부결점 선택, 모든 부결점과 모든 부결점 선택), 단선 등, Ext2.X는 저희를 도와주지 않았어요.
그리고 가장 해결하기 어려운 상황은 나무가 비동기적일 때, 등급을 많이 연결하여 많이 선택하려면 실현하기가 좀 어렵다
여기서 Ext.tree를 사용합니다.TreeNodeUI를 확장하여 이러한 문제가 모두 잘 해결되었습니다.
그래, Ext.tree.TreeNodeUI는 checkbox 기능을 확장합니다. 백그라운드에서 돌아오는 결점 정보는 굳이 checked 속성을 포함하지 않아도 됩니다.
확장된 기능은 다음과 같습니다.
1. 나무의 잎에만 선택 가능
반환된 트리 결점 속성leaf=true일 때만 결점에 checkbox 선택 가능
사용할 때 트리를 선언할 때만 속성을 추가합니다. onlyLeafCheckable:true는 가능합니다. 기본값은false입니다.
2. 나무에 대한 선택 지원
하나의 결점만 선택 가능
사용 시, 트리를 선언할 때만 속성 추가 checkModel:"single"
3. 트리에 대한 종속 연결 다중 선택 지원
결점을 선택하면 해당 결점 아래의 모든 하위 결점 또는 해당 결점의 모든 상위 결점 (루트 결점 제외) 을 자동으로 선택하며, 특히 비동기화를 지원하고, 하위 결점이 표시되지 않으면 백그라운드에서 하위 결점을 가져와 선택/선택 취소합니다.
사용 시 트리를 선언할 때만 속성 checkModel: "cascade"또는 "parentCascade"또는 "childCascade"를 추가하면
cascade: 모든 부결점과 하위 결점을 단계적으로 선택합니다
parentCascade: 종속 연결된 모든 상위 결점 선택
childCascade: 종속 연결된 모든 하위 결점 선택
4. "check"이벤트 추가
이 이벤트는 트리 결점의 체크박스가 바뀔 때 촉발됩니다
사용 시 트리에 이벤트를 등록하기만 하면 됩니다. 예를 들어:
    tree.on("check",function(node,checked){...});
기본적으로 checkModel은'multiple', 즉 다중 선택입니다.onlyLeafCheckable은 false이며 모든 결점은 옵션으로 제공됩니다.
사용 방법:loader에 baseAttrs:{uiProvider:Ext.ux.TreeCheckNodeUI}를 추가합니다.
예:
Js 코드

 var tree = new Ext.tree.TreePanel({  
     el:'tree-ct',  
     width:568,  
     height:300,  
     checkModel: 'cascade',   //    
     onlyLeafCheckable: false,//   
     animate: false,  
     rootVisible: false,  
     autoScroll:true,  
         dwrCall:Tmplt.getTmpltTree,  
         baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI } // uiProvider   
     }),  
     root: new Ext.tree.AsyncTreeNode({ id:'0' })  
 });  
 tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); // "check"   
 tree.render();  

    var tree = new Ext.tree.TreePanel({
        el:'tree-ct',
        width:568,
        height:300,
        checkModel: 'cascade',   // 
        onlyLeafCheckable: false,// 
        animate: false,
        rootVisible: false,
        autoScroll:true,
        loader: new Ext.tree.DWRTreeLoader({
            dwrCall:Tmplt.getTmpltTree,
            baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI }// uiProvider 
        }),
        root: new Ext.tree.AsyncTreeNode({ id:'0' })
    });
    tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); // "check" 
    tree.render();

주의해야 할 것은 사용 예에서 트리는 Ext.tree를 사용했다는 것이다.DWRTreeLoader라는 확장 클래스는 백그라운드 트리 결점을 불러오는 데 사용되며, 이것은 다른loader를 사용하는 것과 다름없습니다.
다른 loader를 사용하는 경우 baseAttrs: {uiProvider: Ext.ux.TreeCheckNodeUI}를 추가하면 됩니다.

 ：
this.on('checkchange',this.check,this);
getNodes:function(treePanel){
        var startNode = treePanel.getRootNode();
        var r = [];
        var f = function(){
                r.push(this);
        };

        startNode.cascade(f);
        return r;
},
check : function(node,bool) {
        if(!bool){
            return;
        }
		if(this.checkModel=='single'){
	        var nodes =this.getNodes(this);
	        if(nodes && nodes.length>0){
	            for(var i=0,len=nodes.length;i<len;i++){
	                if(nodes[i].id!=node.id){
	                    if(nodes[i].getUI().checkbox){
	                        nodes[i].getUI().checkbox.checked = false;
                                nodes[i].attributes.checked=false;
	                    }
	                }
	            }
	        }
		}
	}

http://www.iteye.com/topic/164426