ExtJS. Создание, добавление, удаление элементов DOM

Html разметка

В данном посте в качестве примера у нас будет следующая html разметка…

Некоторые методы вставки элементов класса Ext.dom.Element

Ниже относительно простые способы вставки нового элемента в структуру DOM


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.

Более сложный пример (из документации, слегка измененный)

Здесь мы создали список, и  к нему добавили элемент h2. Для корректной работы в html документе, в  котором будет вызываться этот скрипт должен быть блок <div id=’my-div’></div>

Ещё append(), а также insertBefore(),insertAfter(),overwrite()

Обратите внимание, что в качестве первого параметра можно выбрать как id элемента так и сам элемент класса Ext.dom.Element

Шаблоны. Пример из документации

 

Как удалить Html элемент?

 

This entry was posted in ExtJS, Без рубрики. Bookmark the permalink.