Первым параметром в этом случае передается имя нужного атрибута стиля, а вторым — его новое значение. Оба эти значения передаются в виде строк.
Пример:
Ext.getBody(). setStyle("color", "black");
Здесь мы задаем для цвета текста всей Web-страницы новое значение — black.
Также мы можем передать методу setStyle единственный параметр — конфигуратор. Его свойства должны соответствовать атрибутам стиля, а значения свойств станут новыми значениями этих атрибутов стиля:
<экземпляр объекта Element>.setStyle(<конфигуратор>)
Пример:
Ext.getBody(). setStyle({ color: "black", background-color: "white" });
Здесь мы задаем новые значения цвета сразу для текста и фона Web-страницы. Метод setOpacity задает новое значение полупрозрачности для данного элемента
Web-страницы:
<экземпляр объекта Element>.setOpacity(<новое значение>)
Новое значение полупрозрачности передается в виде числа от 0 (полная прозрачность) до 1 (полная непрозрачность):
Ext.get("cheader"). setOpacity(0.5);
Метод clearOpacity делает данный элемент Web-страницы полностью непрозрачным. Он не принимает параметров:
Ext.get("cheader"). clearOpacity();
Метод clearOpacity рекомендуется применять, чтобы сделать элемент Web-страницы непрозрачным. Вызов метода setOpacity с параметром, равным нулю, может не дать ожидаемых результатов в некоторых Web-обозревателях.
Метод setDisplayed задает новое значение атрибута стиля display:
<экземпляр объекта Element>.setDisplayed(<новое значение>)
Этому методу можно передать строку с новым значением атрибута стиля display. Также можно передать значение true или false; первое значение выведет данный элемент Web-страницы на экран, второе скроет его.
Пример:
Ext.get("cheader"). setDisplayed(false); Ext.get("cheader"). setDisplayed("none");
Оба выражения выполняют одно и то же действие — скрывают контейнер cnavbar.
Управление видимостью элементов Web-страницы
Еще библиотека Ext Core предлагает нам несколько методов объекта Element, позволяющих скрывать элементы Web-страницы и снова их показывать.
Метод setVisibilityMode позволяет указать, с помощью какого атрибута стиля будет выполняться скрытие и показ данного элемента Web-страницы: display или visibility. (Эти атрибуты стиля были описаны в главе 9.)
<экземпляр объекта Element>.setVisibilityMode(<имя атрибута стиля>)
Единственным параметром этому методу передается строка с именем нужного атрибута стиля. Мы можем использовать значения свойств Ext.Element.DISPLAY и Ext.Element.VISIBILITY; первое свойство хранит имя атрибута стиля display, второе — visibility.
Пример:
Ext.get("navbar"). setVisibilityMode(Ext.Element.DISPLAY);
Если метод setVisibilityMode для данного элемента Web-страницы ни разу не был вызван, для управления видимостью элемента Web-страницы будет использован атрибут стиля visibility.
Метод setVisible скрывает или снова выводит данный элемент Web-страницы на экран:
<экземпляр объекта Element>.setVisible(true|false)
Если методу передано значение true, данный элемент Web-страницы будет выведен на экран, если же передано значение false — он будет скрыт:
Ext.get("navbar"). setVisible(false);
Методы show и hide, соответственно, показывают и скрывают данный элемент Web-страницы. Они не принимают параметров:
Ext.get("navbar"). show();
Метод 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 новый абзац, имеющий следующие параметры:
— тег — <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-кодом, с помощью которого будет создан новый элемент.
