extjs에서 잎 노드이든 잎이 아닌 노드이든 트리 노드는 트리의 노드를 나타내는 데 사용됩니다. ExtJS에는 두 가지 유형의 트리 노드가 있습니다. 한 노드는 ext.tree.treenode에 의해 정의 된 일반 간단한 트리 노드이고 다른 노드는 하위 노드 정보를 비동기로로드 해야하는 트리 노드입니다. 이 클래스는 ext.tree.asynctreenode에 의해 정의됩니다.
데이터에서 텍스트는 텍스트, 잎 노드, 어린이 하위 노드, 확장을 표시합니다.
var store = ext.create ( 'ext.data.treestore', {root : {expeded : true, children : [{text : "텍스트 :"텍스트 : "텍스트 :"숙제 ","숙제 ","숙제 ","확장 : 참, 어린이 : [{텍스트 : ", 잎 : true}, {leff : true}]} }]}});Treepanel은 Servlet에서 JSON 데이터를 읽습니다
Ext JS 트리의 데이터는 종종 서버 측의 동적 프로그램에서 얻습니다.
데이터를 얻기 위해 먼저 JSON을 반환하는 서블릿의 공통 전경에 대한 트리와 같은 액세스를 작성할 수 있습니다.
서버 측 서비스 코드 :
import java.io.ioexception; import java.io.printwriter; import javax.servlet.http.htttp.httpervletrequest; import javax.servlet.http.htttp.httpervletresponse; import javax.servlet.servlet.servletexception; import javax.servlet.htperver; Treenodeservlet는 httpservlet {protected void service (httpservletrequest request, httpservletresponse 응답)를 servletexception, ioexception {response.setcontenttype ( "text/html; charset = utf-8")를 확장합니다. String TreeNode = request.GetParameter ( "Node"); String JSON = ""; printWriter out = response.getWriter (); if ( "0".Equals (treenode)) {json+= "[{id : 1, 텍스트 : '0-1'}, {id : 2, text : '0-2'}]; {json+= "[{id : 11, text : '0-1-1', leaf : true}, {id : 12, 텍스트 : '0-1-2', 리프 : true}];} else if ("2 ".equals (treenode)) {json+="[{id : 21, '0-2-1', {텍스트 : '0-2-2',}] if ( "21".equals (treenode)) {json+= "[{id : 211, text : '0-2-1-1', leaf : true}, {id : 212, text : '0-2-1-2', leaf : true}];} out.write (json);}}이제 전경에서 Treepanel이 형성된 로더 방법에서 위에 만든 서블릿에 액세스 할 수 있습니다. 코드는 다음과 같습니다.
클라이언트 디스플레이 코드
ext.onready (function () {var tree = new ext.tree.treepanel ({// div-tree는 html에서 생성 된 객체의 ID 값입니다 : 'div-tree', // 로더 메서드를 사용하여 treenodeservletloader에 액세스하기 위해 : new ext.tree.treeloader ({dataurl : '../ treenodeservlet'})}). ext.tree.asynctreenode ({id : '0', text : '0'}) tree.setRootNode (root); tree.render (); root.expand ();});렌더링은 다음과 같습니다.
Treepanels 사이의 노드를 드래그 앤 드롭합니다
때로는 프로그램에서 트리 파널의 요소를 다른 트리 파널로 끌어 내야합니다. 같은 트리에서 드래그하는 경우 구성 요소의 enabledd 매개 변수를 True로 설정했으며 이제 다른 책들 사이의 요소를 드래그해야합니다. 현재 구성 요소의 enabledrag 및 enabledrop 매개 변수를 설정할 수 있습니다. 자세한 예는 다음과 같습니다.
1. JS 코드 쓰기 :
JS 코드
ext.onready (function () {var tree1 = new ext.tree.treepanel ({el : 'tree1', // enabledrag를 여기에서 true로 설정하여 요소가 enabledrag : true, loader : new ext.tree.treeloader ({treedata1.txt '}); ext.tree.treepanel ({el : 'tree2', // enabledrop은이 트리의 요소를 enabledrop으로 배치 할 수 있음을 나타냅니다 root2 = tree.2. HTML 코드는 다음과 같습니다.
HTML 코드
<div id = "tree1"> </div> <div id = "tree2"> </div>
3. Treeloader에로드 해야하는 두 개의 txt 파일을 작성하면 내부의 데이터는 JSON 형식입니다.
treedata1.txt :
[{text : 'noneaf node'}, {text : 'Leaf Node', Leaf : True}] treedata2.txt : [{text : 'computer', children : [{text : 'java', children : [{ava ', children : [{text :'java ', leav : true}, {java', retop ', retoc}, {text : '알고리즘 소개', Leaf : True}]}, {text : 'music', children : [{text : '텍스트 :'음악 이론의 기본 사항 ', Leaf : True},'Carcassie Classical Guitar 튜토리얼 ', Leaf : True}}]4. 프로그램 효과는 아래 그림에 나와 있습니다.