Добавление и удаление элементов Web-страницы

Добавление и удаление элементов Web-страницы

А теперь — высший пилотаж Web-программирования! Программное добавление на Web-страницу новых элементов и программное же их удаление. Для этого применяют методы объекта DomHelper.

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

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

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

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

Все эти параметры задают в следующих свойствах конфигуратора:

— tag — имя тега в виде строки;

— html — HTML-код, представляющий содержимое элемента;

— cls — стилевой класс, который будет привязан к элементу;

— children или cn — массив конфигураторов, представляющих потомки данного элемента;

- <имя атрибута тега> — значение соответствующего атрибута тега.

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

Листинг 15.2

var oConf = { tag: "P", html: "Привет от Web-сценария!", cls: "someclass", id: "newparagraph" }

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

В листинге 15.2 мы добавили в конец контейнера cmain новый абзац, имеющий следующие параметры:

— тег — <P> (задан свойством tag конфигуратора);

— содержимое — текст "Привет от Web-сценария!" (задано свойством html конфигуратора);

— стилевой класс — someclass (свойство cls);

— имя — newparagraph (свойство id, соответствующее атрибуту тега ID).

Чтобы свежедобавленному абзацу не было скучно, мы добавили сразу же после него маркированный список из трех пунктов (листинг 15.3).

Листинг 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, с новым содержимым и тем же именем.

Листинг 15.4

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

var oConf5 = { tag: "DIV", html: "<P>Новый контейнер с новым содержимым.</P>", 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 со всем его содержимым.