En extjs, ya sea un nodo de hoja o un nodo no hojado, TreeNode se usa para representar el nodo del árbol. En extjs, hay dos tipos de nodos de árboles. Un nodo es un nodo de árbol simple ordinario, definido por Ext.Tree.Treenode, y el otro es un nodo de árbol que necesita cargar la información del nodo infantil de manera asincrónica. Esta clase se define por Ext.Tree.AsyncTreeNode.
En los datos, el texto muestra texto, nodo de hoja, nodo infantil infantil, expandido
var store = ext.create ('ext.data.treestore', {root: {expanded: true, children: [{text: "Study Abroad", Leaf: True}, {Text: "Tarea", Expandy: True, Children: [{Text: "English", Leaf: True}, {Text: "Algebra", Leak: True}]}, {Text: "Toefl,", ", hojas,", hojas, ", hojas,", verdadero, ", hojear," }]}});TreePanel lee datos JSON de Servlet
Los datos en el árbol ext js a menudo se obtienen de programas dinámicos en el lado del servidor.
Para obtener datos, primero podemos escribir un acceso similar a un árbol al primer plano común del servlet que devuelve JSON:
Código de servlet del lado del servidor:
import 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.htp.httttttttttttttts TreeNodeServlet extiende httpservlet (servicio void protegido (solicitud httpservletRequest, httpServletResponse Respuesta) lanza ServletException, IOException {Response.SetContentType ("Text/Html; Charset = UTF-8"); // El nodo aquí está el ID de ASYNCTREENEDODOE en el presente en el presente. Consulte el programa JS a continuación string treeNode = request.getParameter ("nodo"); string json = ""; printWriter outs o respuesta.getwriter (); if ("0" .equals (treeNode)) {json+= "[{id: 1, text: '0-1'}, {id: 2, text: '0-2'}]";} más if ("1". {json+= "[{id: 11, texto: '0-1-1', hoja: true}, {id: 12, text: '0-1-2', Leaf: true}]";} else if ("2" .equals (treeNode)) {json+= "[{id: 21, text: '0-1' '}, {id: 22, texto:' 0-2-2 ', hojas: verdadero}"; if ("21" .equals (treeNode)) {json+= "[{id: 211, texto: '0-2-1-1', hoja: true}, {id: 212, texto: '0-2-1-2', hoja: true}]";} out.write (json);}}}Ahora puede acceder al servlet creado anteriormente en el método del cargador formado por TreePanel en primer plano. El código es el siguiente:
Código de visualización del cliente
Ext.onReady (function () {var tree = new Ext.tree.treepanel ({// El tree de divisas aquí es el valor de identificación de un objeto creado en html: 'div-tree', // use el método de cargador para acceder a treeDeservletloader: new ext.tree.treeloader ({dataUrl: '../ treenodeservlet'})}); var root Ext.tree.asynctreenode ({id: '0', text: '0'}) tree.setrootnode (root); tree.render (); root.EXPAND ();});Las representaciones son las siguientes:
Arrastrar y soltar nodos entre TreePanels
A veces en el programa, necesitamos arrastrar y soltar un elemento de un Treepanel en otro Treepanel. Si estamos arrastrando el mismo árbol, establecemos el parámetro habilitado del componente en verdadero, y ahora necesitamos arrastrar elementos entre diferentes libros. En este momento, podemos establecer los parámetros EnabledRAG y EnBAndlyROP del componente. Los ejemplos detallados son los siguientes:
1. Escribir código JS:
Código JS
Ext.onReady (function () {var tree1 = new ext.tree.treepanel ({el: 'tree1', // set EndabledRag en True aquí para indicar que el elemento se puede arrastrar desde aquí a otra parte EngabledRag: true, cargador: nuevo ext.tree.treeloader ({dataUrl: 'treedata1.txt'})}); var tree2 = new = newe Ext.tree.treePanel ({el: 'tree2', // Establezca Endabledrop en True AQUÍ para indicar que el elemento arrastrado en este árbol se puede colocar EndabledROP: True, Loader: new Ext.tree.TreeLoader ({dataRURL: 'Treedata2.txt'})}); root2 = new Ext.Tree.Asynctreenode ({Text: 'Book'});2. El código HTML es el siguiente:
Código HTML
<div id = "árbol1"> </div> <div id = "árbol2"> </div>
3. Escriba dos archivos txt que deben cargarse en Teeloader, y los datos internos están en formato JSON:
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},},},},}, verdadero} {Texto: 'Introducción al algoritmo', Leaf: True}]}, {Text: 'Music', Children: [{Text: 'Basics of Music Theory', Leaf: True}, {Text: 'Tutorial de guitarra clásica de carcasías', Leaf: True}]}]4. El efecto del programa se muestra en la figura a continuación: