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

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

Метод toggle скрывает данный элемент Web-страницы, если он присутствует на экране, и выводит на экран, если он скрыт. Он не принимает параметров:

Ext.get("navbar"). toggle;

Метод isVisible возвращает true, если данный элемент Web-страницы видим, и false, если невидим. Он не принимает параметров.

Пример:

var elNavbar = Ext.get("navbar");

if (elNavbar.isVisible)

elNavbar.show;

Кроме того, управлять видимостью элемента Web-страницы можно методом setDisplayed, рассмотренным в предыдущем разделе. Этот метод

для скрытия и открытия элемента всегда использует атрибут стиля display.

Добавление и удаление элементов 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 новый абзац, имеющий следующие параметры:

— тег — (задан свойством 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-кодом, с помощью которого будет создан новый элемент.