In ExtJs wird Treenode verwendet, um den Knoten des Baumes darzustellen. In ExtJs gibt es zwei Arten von Baumknoten. Ein Knoten ist ein gewöhnlicher einfacher Baumknoten, der durch ext.tree.treenode definiert ist, und der andere ist ein Baumknoten, der asynchronen laden unteren Knoteninformationen laden muss. Diese Klasse wird durch ext.tree.asynctreenode definiert.
In den Daten zeigt Text Text, Blattknoten, Kinderknoten, erweitert
var store = Ext.create('Ext.data.TreeStore', {root: {expanded: true,children: [{ text: "Study abroad", leaf: true },{ text: "Homework", expanded: true, children: [{ text: "English", leaf: true },{ text: "Algebra", leaf: true}] },{ text: "TOEFL", leaf: true }]}});Treepanel liest JSON -Daten von Servlet
Daten im ext JS -Baum werden häufig von dynamischen Programmen auf der Serverseite erhalten.
Um Daten zu erhalten, können wir zunächst einen baumartigen Zugriff auf den gemeinsamen Vordergrund von Servlet schreiben, der JSON zurückgibt:
Serverseitiger Servlet-Code:
importieren java.io.ioxception; import Java.io.printwriter; import Javax.servlet.http.httpServletRequest; importieren javax.servlet.http.httpservletresponse; import Javax.Servlet.Servlet. Treenodeservlet erweitert den HttpServlet (Protected Void Service (httpServletRequest Request, httpServletResponse-Antwort), die ServletException, IOException {response.setContentType ("text/html; charset = utf-8"). Siehe das JS-Programm unter String String Treenode = Request.getParameter ("Node"); String json = ""; Printwriter Out = Antwort.getWriter (); if ("0" .equals (treeenode)) {json+= "[{id: 1, text: '0-1'}, {id: 2, text: '0-2'}]. {json+= "[{id: 11, text: '0-1-1', blatt: true}, {id: 12, text: '0-1-2', blatt: true}]";} else if ("2" .equals (treenode)) {json+= "[{id: 21, text: text: tear: tear- if ("21" .equals (treenode)) {json+= "[{id: 211, text: '0-2-1-1', leaf: true}, {id: 212, text: '0-2-1-2', blatt: true}]";} out.write (json);}}}}Jetzt können Sie auf das oben erstellte Servlet in der von Treepanel im Vordergrund gebildeten Ladermethode zugreifen. Der Code ist wie folgt:
Client -Anzeigecode
Ext.onReady(function(){var tree = new Ext.tree.TreePanel({//The div-tree here is the id value of an object created in html: 'div-tree',//Use the loader method to access TreeNodeServletloader: new Ext.tree.TreeLoader({dataUrl:'../TreeNodeServlet'})});var root = new Ext.tree.asynctreenode ({id: '0', text: '0'}) tree.setrootnode (root); tree.render (); root.expand ();});Die Renderings sind wie folgt:
Ziehen Sie Knoten zwischen Treepanels ab
Manchmal müssen wir im Programm ein Element eines Treepanels in ein anderes Treepanel ziehen und fallen lassen. Wenn wir denselben Baum ziehen, setzen wir den aktivierten Parameter der Komponente auf True und müssen jetzt Elemente zwischen verschiedenen Büchern ziehen. Zu diesem Zeitpunkt können wir die Parameter "EnabledRAG" und "Aktivierterop" der Komponente festlegen. Die detaillierten Beispiele sind wie folgt:
1. Schreiben Sie JS -Code:
JS -Code
Ext.onReady (function () {var tree1 = new ext.tree.treepanel ({el: 'baum1', // enabledGrag hier angeben, um anzuzeigen, dass das Element von hier nach anderswo aktiviert werden kann: true, lader: neuer. Ext.tree.treepanel ({el: 'tree2', setze enabledrop hier, um anzuzeigen, dass das in diesem Baum gezogene Element aktiviert werden kann, lader, lader: new ext.tree.treeloader ({dataurl: 'treedata2.txt'})}); var root2 = new ext.tree.asyncreenode ({text: 'book'});2. Der HTML -Code lautet wie folgt:
HTML -Code
<div id = "tree1"> </div> <div id = "baum2"> </div>
3. Schreiben Sie zwei TXT -Dateien, die in Treeloader geladen werden müssen, und die Daten im Inneren sind im JSON -Format:
treedata1.txt:
[ {text:'Non-leaf node'}, {text:'Leaf node',leaf:true}]treeData2.txt:[ {text:'Computer',children:[ {text:'Java',children:[ {text:'Java',children:[ {text:'Java',leaf:true}, {text:'Thinking in Java',leaf:true} ]}, {text: 'Einführung in den Algorithmus', Leaf: True}]}, {Text: 'Musik', Kinder: [{Text: 'Basics of Music Theory', Leaf: True}, {text: 'karcassie klassische Gitarren -Tutorial', Leaf: True}]}]4. Der Programmeffekt ist in der folgenden Abbildung dargestellt: