Листинг 15.3

var oConf2 = { tag: "UL", children: [

{ tag: "LI", html: "Первый пункт" },

{ tag: "LI", html: "Второй пункт" },

{ tag: "LI", html: "Третий пункт" }

]

};

Ext.DomHelper.append("cmain", oConf2);

Пункты списка мы задали с помощью свойства children конфигуратора. Этому свойству мы присвоили массив, каждый из элементов которого представляет собой конфигуратор, описывающий параметры одного из пунктов списка.

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

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

Как видим, этот метод принимает те же параметры, что и метод append.

Пример:

Ext.DomHelper.insertFirst("cmain", oConf);

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

Методы insertBefore и insertAfter вставляют созданный элемент Web-страницы, соответственно, перед и после данного элемента на том же уровне вложенности:

Ext.DomHelper.insertBefore|insertAfter(<элемент — будущий "сосед">, <конфигуратор> [, true])

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

Пример:

var oConf3 = { tag: "HR" } Ext.DomHelper.insertBefore("navbar", oConf3); Ext.DomHelper.insertAfter("navbar", oConf3);

Мы только что поместили до и после списка navbar горизонтальные линии.

Метод insertHtml позволяет создать новый элемент Web-страницы на основе строки с его HTML-кодом и поместить его возле указанного элемента или в него в качестве потомка:

Ext.DomHelper.insertHtml(<местоположение>, <элемент — будущий "сосед" или родитель>, <HTML-код> )

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

— "beforeBegin" — созданный элемент будет помещен перед открывающим тегом указанного элемента и станет его предыдущим "соседом" по уровню вложенности;

— "afterBegin" — созданный элемент будет помещен после открывающего тега указанного элемента и станет его первым потомком;

— "beforeEnd" — созданный элемент будет помещен перед закрывающим тегом указанного элемента и станет его последним потомком;

— "afterEnd" — созданный элемент будет помещен после закрывающего тега указанного элемента и станет его следующим "соседом" по уровню вложенности.

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

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

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

Пример:

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

Здесь мы добавили в начало контейнера 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 окажется строка "<P>Новое содержимое контейнера.</P>".

Создавать новые элементы 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, с новым содержимым и тем же именем.