В ExtJ, будь то листовой узел или узел нелиста, TreeNode используется для представления узла дерева. В Extjs есть два типа узлов деревьев. Один узел - это обычный простой узел дерева, определяемый ext.tree.treeNode, а другой - это узел дерева, который должен асинхронно загружать информацию о детском узле. Этот класс определяется ext.tree.asynctreeNode.
В данных текст отображает текст, узел листьев, детские детские узлы, расширенный
var store = ext.create ('ext.data.treestore', {root: {exted: true, дети: [{text: «Исследование за рубежом», лист: true}, {text: «домашнее задание», расширенное: true, дети: [{text: «английский», листь }]}});Treepanel читает данные JSON из сервлета
Данные в дереве EXT JS часто получают из динамических программ на стороне сервера.
Чтобы получить данные, мы сможем сначала написать деревоподобный доступ к общему переднему плану сервлета, который возвращает JSON:
Серверный сервис код:
Импорт java.io.ioexception; import java.io.printwriter; import javax.servlet.http.httpservletrequest; import javax.servlet.http.httpservletrespons TreeNodeservlet расширяет httpservlet {secturet void service (httpservlectrequest, httpservletresponse response) Throws servletexception, ioException {response.setContenttype ("Text/html; charset = utf-8"); // node-это идентификатор в сборе Asynctronde. См. Программу JS ниже String TreeNode = request.getParameter ("node"); string json = ";"; printwriter out = response.getwriter (); if ("0" .Equals (treenode)) {json+= "[{id: 1, text: '0-1'}, {id: 2, text: '0-2'}]"; {json+= "[{id: 11, text: '0-1-1', leaf: true}, {id: 12, text: '0-1-2', leaf: true}]";} else if ("2" .equals (treeNode)) {json+= "[{id: 21, text: '0-2-1'}, {id: 22, text: '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: 'div-tree', // Использовать метод загрузчика для доступа Ext.tree.asynctreeNode ({id: '0', text: '0'}) tree.setRootnode (root); tree.render (); root.expand ();});Рендеринги следующие:
Перетаскивать узлы между трипанелями
Иногда в программе нам нужно перетаскивать и бросить элемент трипанели в другую трипанель. Если мы перетаскиваем в одном и том же дереве, мы установим параметр EnabledD компонента в True, и теперь нам нужно перетаскивать элементы между разными книгами. В настоящее время мы можем установить параметры EnabledRag и EnabledRop компонента. Подробные примеры следующие:
1. Напишите код JS:
JS -код
Ext.onready (function () {var tree1 = new ext.tree.treepanel ({el: 'tree1', // set antabledrag для true здесь, чтобы указать, что элемент может быть перетаскирован отсюда в другое место EnabledRag: True, Loader: new Ext.Tree.TreeLoader ({DataUrl: 'treeData1.txt'}); Ext.tree.treepanel ({el: 'tree2', // установить enabledrop, чтобы указать, что элемент перетаскивается в этом дереве root2 = ext.tree.asynctreeNode ({text: 'book'});2. HTML -код выглядит следующим образом:
HTML -код
<div id = "tree1"> </div> <div id = "tree2"> </div>
3. Напишите два файла TXT, которые необходимо загрузить в TreeLoader, и данные внутри находятся в формате JSON:
triedata1.txt:
[{text: 'не листовой узел'}, {Text: 'Leaf Node', Leaf: True}] triedata2.txt: [{Text: 'Computer', дети: [{Text: 'Java', дети: [{Text: 'Java', дети: [{Text: 'Java', Leaf: True},}, {Text: 'Teplic in java:', leava ',},},},},},},},},}. {text: 'Введение в алгоритм', лист: true}]}, {text: 'music', дети: [{text: 'Основы теории музыки', Leaf: true}, {text: 'Carcassie Classical Tutorial', Leaf: true}]}]]}]]}]}]}]}]}]}]4. Эффект программы показан на рисунке ниже: