.. / 12.2 ExtJS — манипуляции с узлами DOM. добавление, удаление узлов и т.п.
1. Изменение содержимого узла
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
var el = new Ext.Element(document.createElement('b')); el.update('appendChild'); // изменение innerHTML Ext.get('ex22').appendChild(el);
Вообще-то если верить документации, в первой строке можно задать фрагмент HTML, но увы, не заработало.
2.3 Добавлять элементы можно с помощью знакомых по jQuery команд insertAfter и insertBefore. Ниже вместо добавления я просто переортирую три расроложенных последовательно div
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…). Их можно разглядеть в исходниках