의 TreePanel 기본 사용

응용 프로그램 에서 저 희 는 트 리 구 조 를 표시 하거나 처리 할 대상 정보, 예 를 들 어 부서 정보, 지역 정보, 또는 트 리 모양 의 메뉴 정보, 운영 체제 의 폴 더 정보 등 을 자주 언급 합 니 다.전통 적 인 html 페이지 에 있어 서 디 스 플레이 트 리 를 스스로 실현 하 는 것 은 어렵 고 많은 자바 script 을 써 야 합 니 다. 특히 Ajax 비동기 로 불 러 온 트 리 에 있어 Ajax 데이터 로 딩 과 처리 기술 뿐만 아니 라 크로스 브 라 우 저 지원 등 도 고려 하여 처리 하 는 것 이 매우 번 거 롭 습 니 다.ExtJS 에 서 는 기 존의 트 리 컨트롤 을 제공 합 니 다. 이 컨트롤 을 통 해 B / S 응용 프로그램 에서 트 리 구조 정 보 를 포함 한 응용 프로그램 을 신속하게 개발 할 수 있 습 니 다.
TreePanel 기본 사용
트 리 컨트롤 은 Ext. tree. TreePanel 류 로 정의 되 며, 컨트롤 의 이름 은 treepanel 이 며, TreePanel 류 는 Panel 패 널 에서 계승 합 니 다.ExtJS 에서 트 리 컨트롤 을 사용 하 는 것 은 매우 간단 합 니 다. 아래 코드 를 먼저 보 겠 습 니 다.

Ext.onReady(function(){
	var root=new Ext.tree.TreeNode({
		id:"root",
		text:"   "});
	root.appendChild(new Ext.tree.TreeNode({
		id:"c1",
		text:"   "
	}));
	var tree=new Ext.tree.TreePanel({
		renderTo:"hello",
		root:root,
		width:100
	});
 });

 
코드 의 첫 번 째 문장 은 new Ext. tree. TreeNode 클래스 를 사용 하여 트 리 노드 를 만 들 고, 두 번 째 문장 은 트 리 노드 의 루트 를 사용 하 는 appendChild 방법 으로 이 노드 에 하위 노드 를 추가 합 니 다. 마지막 으로 new Ext. tree. TreePanel 을 사용 하여 트 리 패 널 을 만 듭 니 다. 트 리 패 널 의 초기 화 매개 변수 에서 지정 한 트 리 의 루트 속성 값 을 앞 에 만 든 루트 노드 로 만 듭 니 다.나무 뿌리 노드 다.위의 프로그램 실행 효 과 는 다음 그림 과 같다.
 
　　 나무의 노드 정보.ExtJS 트 리 컨트롤 은 이러한 기능 에 대한 지원 을 제공 합 니 다. 트 리 컨트롤 을 만 들 때 트 리 에 노드 로 더 를 지정 하면 서버 에서 트 리 의 노드 정 보 를 동적 으로 불 러 올 수 있 습 니 다.다음 코드 를 살 펴 보 겠 습 니 다.

var root=new Ext.tree.AsyncTreeNode({
		id:"root",
		text:"   "});
	var tree=new Ext.tree.TreePanel({
		renderTo:"hello",
		root:root,
		loader: new Ext.tree.TreeLoader({url:"treedata.js"}),
		width:100
	});

 
treedata. js 이 url 이 돌아 오 는 내용 은 다음 과 같 습 니 다.

[{
        id: 1,
        text: '   1',
        leaf: true
    },{
        id: 2,
        text: '    2',
        children: [{
            id: 3,
            text: '    ',
            leaf: true
        }]
	   }]

위의 프로그램 을 실행 하면 하위 노드 를 비동기 로 불 러 오 는 트 리 를 얻 을 수 있 습 니 다. '루트 노드' 를 누 르 면 서버 에 하위 노드 를 불 러 옵 니 다. 아래 그림 과 같 습 니 다.
 
　　 물론 위의 프로그램 은 트 리 의 모든 노드 정 보 를 한꺼번에 불 러 오 는 것 입 니 다. 모든 노드 가 동적 으로 불 러 오 는 트 리 를 지원 할 수 있 습 니 다. 서버 를 통 해 데 이 터 를 요청 할 때 서버 에서 돌아 오 는 데 이 터 는 하위 노드 만 포함 하고 손자 노드 를 되 돌려 주지 않 으 면 됩 니 다.예 를 들 어 위의 treedata. js 의 내용 을 다음 내용 으로 바 꿉 니 다.

[{
        id: 1,
        text: '   ',
        leaf: false
	    }]

즉, 노드 트 리 에는 하위 노드 만 포함 되 어 있 고 이 하위 노드 는 leaf 값 을 false 로 지정 합 니 다 (기본 적 인 상황 에서 이 값 은 false). 이 노드 는 잎 노드 가 아니 라 그 아래 에 노드 가 있 음 을 나타 냅 니 다.앞의 프로그램 을 실행 하고 '하위 노드' 를 계속 클릭 하면 다음 그림 과 같은 효 과 를 얻 을 수 있 습 니 다.
 
물론 이것 은 무한 순환 트 리 입 니 다. 실제 응용 프로그램 에서 우리 서버 에서 되 돌아 오 는 데 이 터 는 프로그램 동적 으로 생 성 되 기 때문에 매번 leaf 를 false 로 하 는 노드 가 생 길 수 없습니다. 잎 노드 일 때 돌아 오 는 JOSN 대상 의 leaf 를 true 로 설정 해 야 합 니 다.다음 과 같다.

[{
        id: 1,
        text: '   ',
        leaf:true
    }]

이벤트 처리
물론 나무 한 그루 만 표시 할 수 있 는 것 으로 는 부족 합 니 다. 저 희 는 사용자 가 트 리 노드 를 클릭 할 때 해당 하 는 것 을 실행 해 야 합 니 다. 예 를 들 어 특정한 연결 을 열 고 특정한 함 수 를 실행 하 는 등 이벤트 처리 에 사용 해 야 합 니 다.예 를 들 어 다음 코드:

Ext.onReady(function(){
	var root=new Ext.tree.TreeNode({
		id:"root",
		text:"   "});
	var c1=new Ext.tree.TreeNode({
		id:"c1",		
		text:"   "
	});
	root.appendChild(c1);
	var tree=new Ext.tree.TreePanel({
		renderTo:"hello",
		root:root,
		width:100
	});
	tree.on("click",function(node,event){
		alert("    "+node.text);
	}
	);
	c1.on("click",function(node,event){
		alert("    "+node.text);
	}
	);
	
 });

　　 위의 프로그램 을 실행 합 니 다. 사용자 가 트 리 컨트롤 의 임의의 노드 를 클릭 하면 알림 정보 상자 가 팝 업 됩 니 다. 사용자 가 c1 이라는 하위 노드 를 클릭 하면 알림 정보 상자 가 두 번 팝 업 됩 니 다.tree 의 click 이벤트 응답 함 수 를 지정 하 는 것 외 에 node 노드 에 단독 이벤트 응답 함 수 를 지정 하기 때 문 입 니 다.물론 트 리 노드 를 클릭 할 때 지정 한 url 로 이동 하 는 기능 만 실현 하려 면 매우 간단 합 니 다.다음 코드 보기:

Ext.onReady(function(){
	var root=new Ext.tree.TreeNode({
		id:"root",
		href:"http://www.easyjf.com",
		hrefTarget:"_blank",
		text:"   "});
	var c1=new Ext.tree.TreeNode({
		id:"c1",	
		href:"http://wlr.easyjf.com",	
		hrefTarget:"_blank",
		text:"   "
	});
	root.appendChild(c1);
	var tree=new Ext.tree.TreePanel({
		renderTo:"hello",
		root:root,
		width:100
	});
	
	 });

프로그램 을 실행 하고 트 리 노드 를 클릭 하면 새 창 을 탐색 할 때 노드 에서 href 가 지정 한 링크 를 엽 니 다.