Ext 의 비동기 로 딩 트 리

프로젝트 수요: 상하 관계 의 관 리 를 실현 해 야 한다.그리고 노드 를 누 르 면 이 노드 에 따라 해당 하 는 데 이 터 를 불 러 옵 니 다.
        해결 방향: 상하 급 관 리 를 실현 하려 면 자 연 스 럽 게 나무 구조 로 실현 하고 싶 습 니 다.ext 를 사용 하면 ext 의 treePanel 을 사용 할 생각 이 납 니 다.하지만 한 가지 문제 도 고려 해 보 겠 습 니 다. 모든 데 이 터 를 한꺼번에 불 러 오 시 겠 습 니까? 아니면 필요 할 때마다 불 러 오 시 겠 습 니까?데이터 양 이 많 으 면 앞의 방식 은 잘 되 지 않 을 것 이다. 만약 에 모든 요청 이 모든 데 이 터 를 가 져 오 면 시스템 자원 에 낭비 가 될 것 이다.그래서 두 번 째 방식, 즉 비동기 로 트 리 를 불 러 오기 로 했다.
        1. TreePanel 을 새로 만 들 고 loader 와 루트 노드 를 포함 합 니 다.
var billConfigTree = new Ext.tree.TreePanel({

        	columnWidth:.33,
        	//columnHeight:.100,
        	height:600,
        	collapsible: true,
        	margins:'5 0 5 5',
        	cmargins:'5 5 5 5',
        	rootVisible:false,
        	lines:true,        		
        	autoScroll:true,
        	root: new Ext.tree.AsyncTreeNode({
        		id:'root',
        		text:'    ',
        		expanded :true
        	}),
        	collapseFirst:false,	
        	loader:new Ext.tree.TreeLoader({
        		dataUrl:'getNodeData.action'
        	})
		});

        2. 그리고 불 러 오기 전의 트리거 이 벤트 를 설정 합 니 다.
billConfigTree.on('beforeload',function(node){        
            billConfigTree.loader.dataUrl = 'getNodeData.action?nodeId='+node.id;
        });

        이렇게 해서 우 리 는 비동기 로 로드 된 트 리 구 조 를 완성 했다.쉽 지 않 아 요?하하.
         주의해 야 할 것 은 상급 노드 와 하급 노드 의 id 가 같 을 수 없다 는 것 이다. 그렇지 않 으 면 상급 노드 를 클릭 한 '+' 가 하급 노드 를 펼 칠 수 있 지만 '-' 를 클릭 하면 하급 노드 의 문 제 를 접 을 수 없다.

좋은 웹페이지 즐겨찾기