Метод setDisplayed задает новое значение атрибута стиля display:

<экземпляр объекта Element>.setDisplayed(<новое значение>)

Этому методу можно передать строку с новым значением атрибута стиля display. Также можно передать значение true или false; первое значение выведет данный элемент Web-страницы на экран, второе скроет его.

Пример:

Ext.get("cheader"). setDisplayed(false); Ext.get("cheader"). setDisplayed("none");

Оба выражения выполняют одно и то же действие — скрывают контейнер cnavbar.

Еще библиотека 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-страницу новых элементов и программное же их удаление. Для этого применяют методы объекта DomHelper.

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

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

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

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

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

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

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

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

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

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

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

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