Html разметка
В данном посте в качестве примера у нас будет следующая html разметка…
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
... <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> <div id='my-div'> </div> ... |
Некоторые методы вставки элементов класса Ext.dom.Element
Ниже относительно простые способы вставки нового элемента в структуру DOM
|
1 2 3 4 5 6 7 8 9 10 |
//Определяем элемент var newElement = { id:'newid', tag: 'h1', html: 'Новый заголовок' }; // Некоторые методы создания и вставки нового элемента Ext.getBody().insertFirst(newElement);//один вариант Ext.getBody().insertSibling(newElement);//второй вариант Ext.getBody().insertSibling('<h2>Ещё один способ<h2>');//третий вариант |
Ext.dom.Helper – основной помощник при создании новых элементов DOM
Цитирую ApiDocs
The DomHelper class provides a layer of abstraction from DOM and transparently supports creating elements via DOM or using HTML fragments. It also has the ability to create HTML fragment templates from your DOM building code.
DomHelper element specification object
A specification object is used when creating elements. Attributes of this object are assumed to be element attributes, except for 4 special attributes:
tag: The tag name of the element
children (or cn): An array of the same kind of element definition objects to be created and appended. These can be nested as deep as you want.
cls: The class attribute of the element. This will end up being either the “class” attribute on a HTML fragment or className for a DOM node, depending on whether DomHelper is using fragments or DOM.
html: The innerHTML for the element
Основные методы класса Ext.dom.Helper для добавления / вставки новых элементов следующие
В качестве примера рассмотрю здесь только append – добавление в конец списка.
Ext.DomHelper.append()
Пример добавления в конец DOM узла. В данном случае добавляем в body.
|
1 2 3 4 5 6 |
var newElement = { tag: 'h1', html: 'Новый Заголовок' }; Ext.DomHelper.append(Ext.getBody(),newElement); |
Более сложный пример (из документации, слегка измененный)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
var dh = Ext.DomHelper; // create shorthand alias // specification object var NewDomElement = { id: 'my-ul', tag: 'ul', cls: 'my-list', // append children after creating children: [ // may also specify 'cn' instead of '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'}, {tag:'h2',html:'hello from the Ext.DomHelper'} ] }; var list = dh.append( 'my-div', // the context element 'my-div' can either be the id or the actual node NewDomElement // the specification object ); |
Здесь мы создали список, и к нему добавили элемент h2. Для корректной работы в html документе, в котором будет вызываться этот скрипт должен быть блок <div id=’my-div’></div>
Ещё append(), а также insertBefore(),insertAfter(),overwrite()
|
1 2 3 4 5 6 7 8 9 |
var newElement = { tag: 'h1', html: 'Новый Заголовок' }; Ext.DomHelper.append(Ext.getBody(),newElement); Ext.DomHelper.insertBefore('child2',newElement); Ext.DomHelper.insertAfter('child2',newElement); Ext.DomHelper.overwrite('child4',newElement); |
Обратите внимание, что в качестве первого параметра можно выбрать как id элемента так и сам элемент класса Ext.dom.Element
Шаблоны. Пример из документации
|
1 2 3 4 5 6 |
var templ = Ext.DomHelper.createTemplate({ tag: 'h1', html: 'some html text '+ '{placeholder}'+' some html text ' }); templ.append(Ext.get('my-div'), {placeholder:'Привет, это пример шаблона!'}); templ.append(Ext.get('my-div'), {placeholder:'something else from template!'}); |
Как удалить Html элемент?
|
1 |
Ext.get('somediv').remove(); |