.. / 12.2 ExtJS — манипуляции с узлами DOM. добавление, удаление узлов и т.п.

  1. ExtJS-4

1. Изменение содержимого узла

#ex1
Ext.get('ex1').update('<b>UPDATE</b>'); // изменение innerHTML

2. Добавление узла

2.1 Этот метод раньше уже использовался в примерах. Повторю:

 Ext.get('ex21A').createChild('<div class=«domexample»>createChild #ex21A</div>');

2.2. HTML для createChild можно задавать непосредственно строкой, как сделано выше, а можно по-другому. см. примеры:

Ext.get('ex21B').createChild({ // вставка в #ex21B элемента DIV
         tag:'div',             // тег, который нужно вставить
     id: 'ex21Another', // ID этого тега
         cls:'domexample',      // CSS-класс
         html:'<b>Another create method</b>'  // html-содержимое
         });
 
Ext.get('ex21C').createChild({ // вставка в #ex21C списка UL
         tag:'ul',              // тег, который нужно вставить
         children: [       // дочерние елементы
                        {tag: 'li', id: 'item0', html: 'List Item 0'},
                        {tag: 'li', id: 'item1', html: 'List Item 1'},
                        {tag: 'li', id: 'item2', html: 'List Item 2'}
                ]
         });

Этот метод пересекается с темой шаблонов в ExtJS и я его буду рассматривать дополнительно в отдельной части. Но здесь необходимо отметить отдельный класс Ext.DomHelper, в котором присутствуют аналогичные методы

2.2 еще один пример. Добавление через Element.appendChild

#ex22
var el = new Ext.Element(document.createElement('b')); el.update('appendChild'); // изменение innerHTML Ext.get('ex22').appendChild(el); 

Вообще-то если верить документации, в первой строке можно задать фрагмент HTML, но увы, не заработало.

2.3 Добавлять элементы можно с помощью знакомых по jQuery команд insertAfter и insertBefore. Ниже вместо добавления я просто переортирую три расроложенных последовательно div

#ex23A
#ex23B
#ex23C
var ex23A=Ext.get('ex23A');
var ex23B=Ext.get('ex23B');
var ex23C=Ext.get('ex23C');
ex23A.insertAfter(ex23C);
ex23B.insertBefore('ex23A');

3. Удаление узла

Ext.get('example').remove();

Здесь все просто. Удаление Ext.Element кроме удаления DOM-элемента сопровождается очисткой всего что с ним связано, в том числе событий.

4. И еще

И еще в Ext предусмотрена еще куча беспонтовых методов манипуляции с DOM (insertFirst, insertSibling, replace,insertHtml,wrap…). Их можно разглядеть в исходниках

Далее

  1. Шаблоны в ExtJS.
  2. События в ExtJS
  1. 2011-12-11
  2. ExtJS-4
  1. docs.sencha.com/ext-js/4-0/#!/api/Ext.DomHelper - Ext.DomHelper
Go Index Test