ExtJS Tree Drag and Drop Перетаскивание и изменение элементов дерева

В ExtJS предусмотрена сортировка узлов дерева с помощью функции Drag&Drop. Делается это добавлением всего одной строчки в конфигурацию.

var tree=Ext.create('Ext.tree.Panel', {
    viewConfig: {plugins: {ptype: 'treeviewdragdrop'}},        
});

После этого в полученном дереве становится возможным перетаскивать узлы с помощью мышки.



Получить необходимый узел дерева можно следующим способом.

Для начала получают корень дерева.

var root = tree.getRootNode(); // здесь получаем его корневой узел

Метод getRootNode отдает объект типа Ext.data.NodeInterface в котором предусмотрены методы и свойства работы с каждым узлом отдельно. В частности следующие свойства:

nextSibling - следующий сосед
previousSibling предыдущий сосед
parentNode - родитель
lastChild - последний дочерний узел
firstChild - первый дочерний узел
childNodes - массив дочерних узлов

Дополнительно к указанным свойствам есть метод позволяющий перебрать в цикле все дочерние узлы:

root.eachChild(function(childnode) {// сделать что-то с узлом});

Пример кода получения информации об узлах:

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+';<br> ' + 
    'childNodes:'+childs+'; ';
                     
s+="<br>eachChild:" 
   
root.eachChild(function(childnode) {
    s=s+childnode.data.text+'; ';
});

Ext.get('ex21').update(s);

Добавление и удаление узлов.
Применительно к классу 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);

Результат выполнения этих методов, применительно к дереву из предыдущего примера можно видеть ниже.



Удаляется узел с помощью следующего кода:

node.remove();