Dans les extjs, qu'il s'agisse d'un nœud feuille ou d'un nœud non-feuille, Treenode est utilisé pour représenter le nœud de l'arbre. Dans les extjs, il existe deux types de nœuds d'arbres. Un nœud est un nœud d'arbre simple ordinaire, défini par Ext.tree.Treenode, et l'autre est un nœud d'arbre qui doit charger des informations de nœud enfant de manière asynchrone. Cette classe est définie par ext.tree.asynctreenode.
Dans les données, le texte affiche du texte, du nœud de feuille, du nœud enfant des enfants, élargi
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 lit les données JSON de Servlet
Les données de l'arborescence EXT JS sont souvent obtenues à partir de programmes dynamiques côté serveur.
Afin d'obtenir des données, nous pouvons d'abord écrire un accès en forme d'arbre au premier plan de servlet qui renvoie JSON:
Code de servlet côté serveur:
Importer java.io.ioException; import java.io.printwriter; import javax.servlet.http.httpservletRequest; import javax.servlet.http.httpservletResponse; import javax.servlet.servlet.servletException; Import Javax.servlet.http.httplets; TreenoServlet étend HttpServlet {Service Void Protected (Response HTTPServletRequest, HttpservletResponse) lève ServletException, ioException {Response.SetContentType ("Text / Html; Charet = UTF-8"); // Le nœud ici est l'ensemble d'identité dans le asynctReen Assembly dans la prélèvement. Voir le programme JS ci-dessous String Treenode = request.getParameter ("node"); String JSON = ""; printwriter out = réponse.getWriter (); if ("0" .equals (Treenode)) {json + = "[{id: 1, text: '0-1'}, {id: 2, texte: '0-2'}]";} else if ("1". {JSON + = "[{id: 11, texte: '0-1-1', Leaf: true}, {id: 12, texte: '0-1-2', feuille: true}]";} else if ("2" .equals (Treenode)) {json + = "[{id: 21, text: '0-2-1'}, {id: 22, texte: '0-2', feu if ("21" .equals (Treenode)) {json + = "[{id: 211, texte: '0-1-1-1', feuille: true}, {id: 212, texte: '0-1-2', feuille: true}]";} out.write (json);}}Vous pouvez maintenant accéder au servlet créé ci-dessus dans la méthode du chargeur formé par Treepanel au premier plan. Le code est le suivant:
Code d'affichage client
Ext.onready (function () {var arbre = new Ext.tree.Treepanel ({// Le div-are est ici la valeur d'ID d'un objet créé en html: 'div-tree', // Utilisez la méthode de chargeur pour accéder à TreenoServletLoader: new Ext.tree.Treeloader); Ext.tree.asynctreenode ({id: '0', texte: '0'}) Tree.SetRootNode (root); arbre.render (); root.expand ();});Les rendus sont les suivants:
Glisser et déposer les nœuds entre les tripanels
Parfois, dans le programme, nous devons faire glisser et laisser tomber un élément d'un Treepanel dans un autre Treepanel. Si nous faisons glisser dans le même arbre, nous définissons le paramètre activé du composant sur true, et maintenant nous devons faire glisser des éléments entre différents livres. À l'heure actuelle, nous pouvons définir les paramètres EmpabledRag et AlivedRop du composant. Les exemples détaillés sont les suivants:
1. Écrivez le code JS:
Code JS
Ext.onready (function () {var arbre1 = new Ext.tree.Treepanel ({el: 'arbre1', // set compatiabledrag sur true ici pour indiquer que l'élément peut être traîné à partir d'ici à ElsewheredRag: true, chargeur: new Ext.tree.treeloader ({dataUrl: 'treedata1.text'})}); Ext.tree.Treepanel ({el: 'arbre2', // set ENTIPEDROP sur true ici pour indiquer que l'élément traîné dans cette arborescence peut être placé enable var root2 = new Ext.2. Le code HTML est le suivant:
Code html
<div id = "arbre1"> </ div> <div id = "arbre2"> </div>
3. Écrivez deux fichiers TXT qui doivent être chargés dans Treeloader, et les données à l'intérieur sont au format JSON:
triedata1.txt:
[{texte: 'nœud non-feuille'}, {texte: 'nœud de feuille', feuille: true}] triedata2.txt: [{texte: 'ordinateur', enfants: [{text: 'java', enfants: [{texte: 'java', enfants: [{texte: 'java', feuille: true}, {text: 'pensant dans java', feuille:},},}, {text: 'penser dans Java', feu {Texte: 'Introduction à l'algorithme', Leaf: true}]}, {texte: 'musique', enfants: [{texte: 'Basics of Music Theory', Leaf: true}, {text: 'Carcassie Classical Guitar Tutorial', Leaf: true}]}]4. L'effet du programme est illustré dans la figure ci-dessous: