HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Дронов Владимир

Метод insertHtml возвращает экземпляр объекта HTMLElement, представляющий созданный элемент Web-страницы. К сожалению, указать ему вернуть экземпляр объекта Element мы не можем.

Пример:

var htelCMain = Ext.getDom("cmain"); Ext.DomHelper.insertHtml("afterBegin", htelCMain, "<P ID=\"newparagraph\" CLASS=\"someclass\">");

Здесь мы добавили в начало контейнера cmain новый абзац с именем newparagraph и привязанным к нему стилевым классом someclass.

Пример:

var htelNavbar = Ext.getDom("navbar"); Ext.DomHelper.insertHtml("beforeBegin", htelNavbar, "<HR>"); Ext.DomHelper.insertHtml("afterEnd", htelNavbar, "<HR>");

А

здесь мы поместили до и после списка, формирующего полосу навигации, горизонтальные линии HTML.

Метод overwrite создает новый элемент Web-страницы и помещает его внутрь указанного элемента, заменяя все его предыдущее содержимое:

Ext.DomHelper.overwrite(<элемент — будущий родитель>, <конфигуратор>|<HTML-код>[, true])

Первый параметр — элемент Web-страницы, который станет родителем для вновь создаваемого элемента. Это может быть либо строка с именем элемента, либо представляющий его экземпляр объекта Element.

Второй параметр — либо конфигуратор, описывающий параметры создаваемого элемента, либо строка с HTML-кодом, на основе которого он будет создан.

Метод overwrite возвращает экземпляр объекта HTMLElement, представляющий созданный элемент Web-страницы. Но если мы передадим в качестве третьего, необязательного, параметра значение true, он вернет экземпляр объекта Element.

Пример:

var oConf4 = { tag: "P", html: "Новое содержимое контейнера."}Ext.DomHelper.overwrite("cmain", oConf4);

Здесь мы создаем новый абзац и помещаем его в контейнер cmain, полностью заменяя его предыдущее содержимое.

Метод markup принимает в качестве единственного параметра конфигуратор и возвращает строку с созданным на его основе HTML-кодом.

Пример:

Ext.DomHelper.markup(<HTML-код>)

var s = Ext.DomHelper.markup(oConf4);

В переменной s окажется строка "Новое содержимое контейнера.".

Создавать новые элементы Web-страницы мы можем также с помощью рассмотренных далее методов объекта Element. Вероятно, во многих случаях они будут удобнее.

Метод createChild создает новый элемент Web-страницы и делает его потомком данного элемента:

<экземпляр объекта Element>.createChild(<конфигуратор> [, <элемент, перед которым будет вставлен созданный элемент>])

Первым параметром данному методу передается конфигуратор, описывающий параметры создаваемого элемента Web-страницы.

Если второй параметр опущен, созданный элемент Web-страницы будет помещен в самом конце данного элемента и станет его последним потомком. Если же в качестве его передать какой-либо элемент-потомок в виде экземпляра объекта Element, создаваемый элемент будет вставлен перед ним.

Метод createChild возвращает экземпляр объекта Element, представляющий

созданный элемент.

Пример:

var elCMain = Ext.get("cmain");

elCMain.createChild(oConf, elCMain.first);

Здесь мы вставляем абзац, описываемый конфигуратором oConf, в самое начало контейнера cmain — перед первым его потомком.

Метод insertFirst принимает в качестве параметра конфигуратор, создает на его основе элемент Web-страницы и помещает его в начало данного элемента в качестве его первого потомка:

<экземпляр объекта Element>.insertFirst(<конфигуратор>) Ext.get("cmain"). createChild(oConf);

Метод replaceWith принимает в качестве параметра конфигуратор, создает на его основе элемент Web-страницы и полностью заменяет им данный элемент.

В примере из листинга 15.4 мы удаляем полностью контейнер cmain и помещаем на его место другой контейнер, описываемый конфигуратором oCont5, с новым содержимым и тем же именем.

Листинг 15.4

<экземпляр объекта Element>.replaceWith(<конфигуратор>)

var oConf5 = { tag: "DIV", html: "Новый контейнер с новым содержимым.", id: "cmain"

} Ext.get("cmain"). replaceWith(oConf5);

Метод wrap принимает в качестве параметра конфигуратор, создает на его основе элемент Web-страницы и помещает в него данный элемент, делая его потомком созданного элемента:

<экземпляр объекта Element>.wrap([<конфигуратор>])

Как видим, при вызове этого метода мы можем не указывать конфигуратор. В таком случае метод wrap создаст блочный контейнер на основе тега <DIV>.

Пример:

Ext.select("UL[id=navbar]"). wrap;

Здесь мы заключаем список navbar, формирующий полосу навигации, в блочный контейнер. Обратим внимание, что мы не передали методу wrap никаких параметров — он сам "поймет", что именно блочный контейнер мы хотим создать.

А в следующем примере мы заключаем все абзацы, непосредственно вложенные в контейнер cmain, в большие цитаты:

Ext.select("DIV[id=cmain] > P"). wrap({ tag: "BLOCKQUOTE" });

Да, библиотека Ext Core представляет весьма мощные средства для создания новых элементов Web-страницы. К сожалению, удалить ненужные элементы можно

только методом remove объекта Element. Он немедленно удаляет данный элемент Web- страницы со всем его содержимым, не принимает параметров и не возвращает значения.

Пример:

Ext.get("cmain"). remove;

Здесь мы удаляем контейнер cmain со всем его содержимым.

Обработка событий 

Теперь самое время рассмотреть один ключевой вопрос Web-программирования: события, их возникновение и обработка.