В данном посте посмотрим как можно манипулировать данными – получать innerHTML, изменять его, работать со стилями и так далее. Также узнаем как менять местами HTML элементы. Для примера возьмем вот такую HTML разметку.
|
1 2 3 4 5 6 7 8 9 10 |
... <div id="somediv">another div</div> <div id="parent" class="parentclass" name='It is value of the name attribute'> <div id="child1" class='firstclass'>someContent1</div> <div id="child2" class='firstclass'>someContent2</div> <div id="child3" class='secondclass'>someContent3</div> <div id="child4" class='secondclass'>someContent4</div> </div> ... |
Как получить / изменить innerHTML?
Через Ext.get()
|
1 2 3 4 5 6 7 8 9 10 |
//Получаем элемент var myElement=Ext.get('child1'); //Получение innerHTML alert(myElement.getHtml()); //Изменение innerHTML myElement.setHtml('SomeNewContent'); //Ещё раз получение alert(myElement.getHtml()); |
Через Ext.query()
|
1 2 3 4 5 6 7 8 9 10 |
//Получаем массив элементов var myElements=Ext.query('div',false,'parent'); //Получение innerHTML alert(myElements[0].getHtml()); //Изменение innerHTML myElements[0].setHtml('SomeNewContent'); //Ещё раз получение alert(myElements[0].getHtml()); |
Через Ext.select()
|
1 2 3 4 5 6 7 8 9 10 |
//Получаем "композит" элементов var myElements=Ext.select('div#child1'); //Получаем innerHTML отдельного элемента alert(myElements.item(0).getHtml()); //Изменяем innerHTML отдельного элемента myElements.item(0).setHtml('SomeNewContent'); //Ещё раз получаем alert(myElements.item(0).getHtml()); |
Как получить изменить атрибуты HTML элементов?
Здесь я рассмотрю только на примере метода Ext.get(); Для остальных методов Ext.select(), Ext.query(), Ext.fly() – по аналогии.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//Получаем элемент, экземпляр Ext.dom.Element var myElement=Ext.get('parent'); myAttr=myElement.getAttribute('name'); alert(myAttr); //Есть также метод getAttributes( ) - возвращает объект элементов {key:value} //Установка атрибутов myElement.set({name:'myNewName',class:'myNewClass'/*ещё пары*/}); //Считываем новые атрибуты myAttr=myElement.getAttribute('name'); alert(myAttr); myAttr=myElement.getAttribute('class'); alert(myAttr); |
Здесь надо отметить, что есть также метод getAttributes( ) – возвращает объект элементов {key:value}, более подробно с ним можно познакомиться в документации.
Как изменить стиль HTML элементов?
Метод setStyle
|
1 2 3 4 5 6 7 8 9 |
//Получаем элемент, экземпляр Ext.dom.Element var myElement=Ext.get('child1'); //Меняем стиль myElement.setStyle({ fontWeight: 'bold', backgroundColor: 'yellow', margin: '10px' }); |
Метод applyStyles – аналогичен
|
1 2 3 4 5 6 7 8 9 |
//Получаем элемент, экземпляр Ext.dom.Element var myElement=Ext.get('child1'); //Меняем стиль myElement.applyStyles({ fontWeight: 'bold', backgroundColor: 'yellow', margin: '10px' }); |
В принципе, основные моменты мы рассмотрели – остальные методы хорошо описаны в документации.
Как поменять местами HTML элементы?
|
1 2 |
Ext.get('child2').insertAfter('child4'); Ext.get('child1').insertBefore('child4'); |
Интересный пример из интернета (демонстрация insertBefore)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
Ext.onReady(function() { var ct = Ext.getBody().createChild({ cn: [{ id: 'item1', html: 'Item 1' }, { id: 'item2', html: 'Item 2' }, { id: 'item3', html: 'Item 3' }] }), moved = false; Ext.get('item3').on('click', function(){ if (moved) { console.log('click'); } else { Ext.get('item3').insertBefore('item2'); moved = true; } }); }); |