.. / 10.2 Деревья в ExtJS. Манипуляции с узлами

  1. ExtJS-4

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);

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

  1. 2011-12-11
  2. ExtJS-4
  1. www.sencha.com/learn/ext-js-trees/ - www.sencha.com: The Tree Component. Ext JS, 4.x. Guide
Go Index Test