вторник, 21 августа 2012 г.

ExtJS DOM Манипуляции с узлами DOM: добавление и удаление узлов

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

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

Добавление узла:

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

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

Вариант 1.
Ext.get('ex21B').createChild({ // вставка в #ex21B элемента DIV
    tag:'div',             // тег, который нужно вставить
    id: 'ex21Another', // ID этого тега
    cls:'domexample',      // CSS-класс
    html:'<b>Another create method</b>'  // html-содержимое
});

Вариант 2.
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'}
    ]
});

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

Вариант 4.
var ex23A=Ext.get('ex23A');
var ex23B=Ext.get('ex23B');
var ex23C=Ext.get('ex23C');

ex23A.insertAfter(ex23C);
ex23B.insertBefore('ex23A');



Удаление узла:

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

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

Комментариев нет:

Отправить комментарий