Nos extjs, seja um nó foliar ou um nó sem folhas, o Treenode é usado para representar o nó da árvore. Nos extjs, existem dois tipos de nós de árvores. Um nó é um nó de árvore simples comum, definido pelo Ext.tree.treenode, e o outro é um nó de árvore que precisa carregar informações do nó infantil de maneira assíncrona. Esta classe é definida pelo ext.tree.asynctreenode.
Nos dados, o texto exibe texto, nó foliar, nó infantil infantil, expandido
var store = ext.create ('ext.data.treestore', {root: {expandido: true, filhos: [{text: "Estudo no exterior", folha: true}, {text: "homework", expandido: "algebra: [{text:" ", flel: flen: true}, {text:" algebra ", [{text:", ", folha: true}, {text:" algebra ", [{text:", ", lef: true}, {text:" algebra ",, [{text:", ", lef: true}, {text:" algebra ",, [{text:", ", folha: true}, {text:" algar verdadeiro }]}});TreePanel lê dados JSON do servlet
Os dados na árvore Ext JS são frequentemente obtidos de programas dinâmicos no lado do servidor.
Para obter dados, podemos primeiro escrever um acesso semelhante a uma árvore ao primeiro plano comum do servlet que retorna JSON:
Código do servidor do servidor:
importar java.io.ioException; importar java.io.printwriter; importar javax.servlet.http.httpServletRequest; importar javax.servlet.http.httpServletSponse; importação javax.servlet.servlet.servLeTTexception; importação javax.Servlet.Servlet.ServLeTTException; importação javax.servlet.Servlet.ServLETTEXCECCENTE; TreenODeServlet estende HttPServlet {Serviço de vazio protegido (solicitação httpServletRequest, httpServletResponse resposta) lança servletexception, ioexception {Response.setContentType ("text/html; charset = utf-8"); // o node. Consulte o programa JS abaixo da string treenode = request.getParameter ("nó"); string json = ""; printWriter out = Response.getWriter (); if ("0" .equals (treenode)) {json+= "[{id: 1, text: '0-1'}, {id: 2, '. {json+= "[{id: 11, texto: '0-1-1', folha: true}, {id: 12, texto: '0-1-2', folha: true}]";} else if ("2" .equals (Treenode)) {json+= "[{id: 21, texto: '0-2-1'}, {id: 22, texto: '0-2-2', folha: true}]";} else if ("21" .equals (Treenode)) {json+= "[{id: 211, text: '0-2-1-1', folha: true}, {id: 212, text: '0-2-1-2', folha: true}]";} out.write (json);}}Agora você pode acessar o servlet criado acima no método do carregador formado pela TreePanel em primeiro plano. O código é o seguinte:
Código de exibição do cliente
Ext.OnReady (function () {var Tree = new Ext.Tree.TreePanel ({// O div-Tree aqui está o valor de ID de um objeto criado em HTML: 'Div-Tree', // Use o método do carregador para acessar TreenODeSlertLoader: new Ext.Tree.TreeLoader ({DATATURL: '.. Ext.tree.asynctreenode ({id: '0', text: '0'}) árvore.setRootNode (root); árvore.render (); root.expand ();});As renderizações são as seguintes:
Arraste e soltar nós entre treeepanels
Às vezes, no programa, precisamos arrastar e soltar um elemento de um TreePanel em outro treepainel. Se estivermos arrastando na mesma árvore, definimos o parâmetro EnabledD do componente como True, e agora precisamos arrastar elementos entre livros diferentes. No momento, podemos definir os parâmetros EnabledRag e EnabledRop do componente. Os exemplos detalhados são os seguintes:
1. Escreva o código JS:
Código JS
Ext.OnReady (function () {var Tree1 = new Ext.Tree.TreePanel ({el: 'Tree1', // Set EnabledRag para true aqui para indicar que o elemento pode ser arrastado daqui para outros lugares habilitados: TRUE, carregador: novo ext.tree.TreeLoader ({{DATEURL: 'Treedata1.ttata.txt'; Ext.Tree.TreePanel ({El: 'Tree2', // Definir EnabledRop para True aqui para indicar que o elemento arrastado nesta árvore pode ser colocado EnabledRop: true, carregador: new ext.tree.treeLoader ({DATAURL: 'Treedata2.txt'}}}); Node '});2. O código HTML é o seguinte:
Código HTML
<div id = "árvore1"> </div> <div id = "árvore2"> </div>
3. Escreva dois arquivos TXT que precisam ser carregados no TreeLoader, e os dados internos estão no 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} ]}, {text: 'Introdução ao algoritmo', folha: true}]}, {text: 'music', crianças: [{text: 'Basics of music teoria', folha: true}, {text: 'Carcassie tutorial de guitarra clássica', folha: true}]}]4. O efeito do programa é mostrado na figura abaixo: