.. / 10.2 Деревья в ExtJS. Манипуляции с узлами
1. Drag & Drop
В ExtJS предусмотрена сортировка узлов дерева через Drag&Drop. Lkz njuj xnj, Делается это добавлением всего одной строчки в конфигурацю
var tree=Ext.create('Ext.tree.Panel', {
…………………………….
viewConfig: {plugins: {ptype: 'treeviewdragdrop'}},
…………………………….
});
Теперь в полученном дереве (см. ниже) можно мышкой тасовать туды-сюды узлы дерева.
2. Навигация по дереву
Получить необходимый узел дерева можно несколькими способами. Пока я остановился на одном. Для начала я получаю корень дерева:
var root = tree.getRootNode(); // здесь получаю его корневой узел.
Метод getRootNode отдает объект типа Ext.data.NodeInterface в котором предусмотрены методы и свойства работы с каждым узлом отдельно. В частности следующие свойства:
- nextSibling - следующий сосед
- previousSibling предыдущий сосед
- parentNode - родитель
- lastChild псоледний дочерний узел
- firstChild - первый дочерний узел
- childNodes - массив дочерних узлов
Дополнительно к указанным свойствам есть метод позволяющий перебрать в цикле все дочерние узлы:
root.eachChild(function(childnode) {…. сделать что-то с узлом …});
В документации я не нашел метода, позволяющего вытащить информацию о текущем узле. Как вытащить свойства узла (те которые использовались при создании узлов дерева) в документации я не нашел. Методом тыка в FireBug выяснилось, что у Ext.data.NodeInterface есть свойство data которое можно и читать и изменять. В отдельных примерах так оно и делается. Х.з. насколько это правильно, но пока других вариантов я не обнаружил.
Ниже я сделал два контейнера, один для вывода дерева, второй для проверки работы указанных методов и вывода отадочной информации
Ниже код примера с комментариями
var tree=Ext.create('Ext.tree.Panel', {…});
var root = tree.getRootNode(); // здесь получаю его корневой узел.
var first=root.firstChild; // получаю первый дочерний узел.
var next =first.nextSibling // получаю следующего соседа первого дочернего узла.
var childs=root.childNodes; // получаю массив всех дочерних узлов.
var last=root.lastChild; // получаю последний дочерний узел.
var s= // отладочная информация
'FirstChild:'+first.data.text+'; '+
'Next:'+next.data.text+'; '+
'LastChild:'+last.data.text+';
' +
'childNodes:'+childs+'; ';
s+=«
eachChild:»
root.eachChild(function(childnode) {
s=s+childnode.data.text+'; ';
}); Ext.get('ex21').update(s);
2. Добавление, удаление узлов
Применительно к классу Ext.data.NodeInterface есть набор методов
для удаления-добавления узлов:
appendChild, InsertChild,insertBefore,insertAfter
В примере выше я определил корень дерева, к этому корню добавлю
дочерний узел:
var parent = root.appendChild(
{text: 'root.appendChild'}
);
Результат appendChild возвращает ссылку на добавленный узел. Добавлять можно не т олько отдельные узлы, но и целые деревья:
parent.appendChild(
[
{text: 'parent.appendChild 1',leaf: true},
{text: 'parent.appendChild 2',leaf: true},
{text: 'parent.appendChild 3',leaf: true}
]);
parent.expand(); // здесь я раскрыл узел
метод InsertChild используется для вставки узла перед узлом с известным индексом (индекс по порядку следования в наборе дочерних узлов 0,1,2…)
root.insertChild( // вставка перед третьим узлом
2, {text: 'root.insertChild 2',leaf: true});
root.insertChild(// вставка перед первым узлом
0, {text: 'root.insertChild 0',leaf: true});
для метода insertBefore и insertAfter требуется указать узел после и перед которым нужно сделать вставку нового узла:
parent.insertBefore(
{text: 'insertBefore',leaf: true},
parent.firstChild);
результат выполнения этих методов, применительно к дереву из предыдущего примера можно видеть ниже
C удалением ничего нового:
node.remove();