var clientWidth = Ext.lib.Dom.getViewportWidth();
var clientHeight = Ext.lib.Dom.getViewportHeight();
ВНИМАНИЕ!
Описанные здесь методы почему-то не документированы в справочнике по Ext Core. Автор обнаружил их в JavaScript-коде этой библиотеки.
Получение и задание значений атрибутов тега
Часто приходится получать и задавать значения атрибутов тега, с помощью которого создан элемент Web-страницы. Для этого Ext Core предоставляет два удобных метода и одно свойство объекта Element.
Метод getAttribute возвращает значение атрибута тега с указанным именем:
<экземпляр объекта Element>.getAttribute(<имя атрибута тега>)
В качестве параметра методу передается строка с именем атрибута тега. Метод возвращает строку с его значением.
Пример:
var s = Ext.get("cmain"). child("A: first"). getAttribute("href");
Здесь мы получаем значение атрибута тега HREF (интернет-адрес) первой гиперссылки в контейнере cmain.
Метод set задает новые значения для атрибутов тега:
<экземпляр объекта Element>.set(<конфигуратор>)
В главе 14 мы узнали о встроенном объекте JavaScript Object и выражениях-инициализаторах, с помощью которых создаются его экземпляры. Также мы узнали, что в Ext Core экземпляры этого объекта применяются для задания параметров многих методов. Так вот, метод set — первый из изученных нами, где используется такой подход.
В качестве параметра этому методу передается экземпляр объекта Object. Имена его свойств должны совпадать с именами атрибутов тега, которым следует дать новые значения, а значения этих свойств собственно задают значения соответствующих атрибутов тега.
В терминологии Ext Core экземпляры объекта Object, задающие набор параметров для метода, называются конфигураторами.
Пример:
var oConf = { target: "_blank" };
var s = Ext.get("cmain"). select("A"). set(oConf);
Здесь мы задаем для всех гиперссылок в контейнере cmain значение атрибута стиля TARGET, равное "_blank". Для этого мы используем конфигуратор, содержащий свойство target со значением "_blank".
Свойство id возвращает строку со значением атрибута тега ID, т. е. имя элемента
Web-страницы:
var sID = Ext.getBody(). child("DIV: last"). id;
Здесь мы получаем имя последнего контейнера на Web-странице — "ccopyright".
К сожалению, задать новое имя для элемента Web-страницы с помощью свойства id мы не сможем. Конечно, можно присвоить этому свойству новое значение, но оно не будет перенесено в атрибут тега ID данного элемента. Так что нам придется воспользоваться методом set:
Ext.getBody(). child("DIV: last"). set({ id: "lastdiv" });
ВНИМАНИЕ!
Вообще, менять имя элемента Web-страницы в Web-сценарии — дурной тон программирования. Имя элемента должно задаваться всего один раз — при его создании.
Управление привязкой стилевых классов
Привязка и "отвязка" стилевых классов — одна из самых часто выполняемых в Web-сценариях операций. Было бы странно, если библиотека Ext Core не предоставляла средств для ее выполнения.
Методы объекта Element, которые мы сейчас рассмотрим, выполняют привязку стилевых классов к элементу Web-страницы и удаление их из привязки ("отвязку").
Метод addClass выполняет привязку указанного стилевого класса к данному элементу Web-страницы. Если такой стилевой класс уже есть в привязке, повторная его привязка не выполняется:
<экземпляр объекта Element>.addClass(<имя стилевого класса>)
В качестве параметра данному методу передается строка с именем привязываемого стилевого класса:
Ext.select("P"). addClass("someclass");
Здесь мы привязываем ко всем абзацам на Web-странице стилевой класс someclass.
Метод removeClass удаляет указанный стилевой класс из привязки к данному элементу Web-страницы. Если такого стилевого класса в привязке нет, никаких действий не выполняется:
<экземпляр объекта Element>.removeClass(<имя стилевого класса>)
Параметр данного метода — строка с именем привязываемого стилевого класса:
Ext.select("P"). removeClass("someclass");
Здесь мы удаляем привязанный ранее ко всем абзацам на Web-странице стилевой класс someclass.
Метод toggleClass привязывает заданный стилевой класс к элементу Web- страницы, если он еще не был привязан, и удаляет его из привязки в противном случае:
<экземпляр объекта Element>.toggleClass(<имя стилевого класса>)
Параметр данного метода — строка с именем привязываемого стилевого класса:
Ext.select("P"). toggleClass("someclass");
Метод replaceClass удаляет из привязки к данному элементу Web-страницы указанный стилевой класс и привязывает другой:
<экземпляр объекта Element>.replaceClass(<имя стилевого класса, удаляемого из привязки>, <имя стилевого класса, добавляемого в привязку>)
В качестве параметров этому методу передаются две строки с именами "отвязываемого" и привязываемого стилевых классов:
Ext.select("P"). replaceClass("someclass", "otherclass");
Метод radioClass привязывает указанный стилевой класс к данному элементу Web-
страницы и удаляет его из привязки у всех элементов того же уровня вложенности:
<экземпляр объекта Element>.radioClass(<имя стилевого класса>)
Параметр данного метода — строка с именем привязываемого стилевого класса:
elNavbar.child("UL LI: nodeValue=IMG"). radioClass("hovered");
Здесь мы привязываем стилевой класс hovered к тому пункту вложенного списка, формирующего полосу навигации, который содержит текст "IMG", и удаляем его из привязки у всех остальных пунктов этого же списка.
Метод hasClass возвращает true, если указанный стилевой класс присутствует в привязке к данному элементу Web-страницы, и false в противном случае:
<экземпляр объекта Element>.hasClass(<имя стилевого класса>)
Параметр этого метода — имя стилевого класса:
if (Ext.get("cnavbar"). hasClass("hovered")) {
var s = "К полосе навигации такой стилевой класс не привязан"
else
var s = "И что он там делает?..";
Получение и задание значений атрибутов стиля
Получение или задание значений атрибута стиля, примененного к какому-либо элементу Web-страницы, выполняется тоже весьма часто. В этом случае нам пригодятся несколько методов объекта Element, описанных далее.
Метод getStyle возвращает значение указанного атрибута стиля для данного элемента Web-страницы:
<экземпляр объекта Element>.getStyle(<имя атрибута стиля>)
Параметр данного метода — строка с именем нужного атрибута стиля. Значение этого атрибута стиля возвращается также в виде строки.
Значение атрибута стиля, возвращаемое методом getStyle, получается в результате сложения действия всех стилей, привязанных к элементу Web-страницы явно или неявно. Если указанный атрибут стиля не был задан ни в одном из привязанных к этому элементу стилей, метод getStyle вернет значение по умолчанию, устанавливаемое самим Web-обозревателем.
Пример:
var marginLeft = elNavbar.getStyle("margin-left");
Метод getColor служит для получения значений атрибутов стиля, задающих цвет:
<экземпляр объекта Element>.getColor(<имя атрибута стиля>, <значение цвета по умолчанию>[, <префикс>])
Первый параметр — имя нужного атрибута стиля в виде строки. Допускается задание только тех атрибутов стилей, что принимают в качестве значения цвет; это могут быть атрибуты стиля, задающие цвет текста, фона, рамки или выделения.
Второй параметр — значение цвета по умолчанию. Оно будет возвращено, если метод не смог получить значение указанного атрибута стиля.
Третий, необязательный, параметр — префикс, который добавляется в начале возвращаемого значения цвета. Если данный параметр не указан, в качестве префикса используется символ решетки #.
Метод getColor возвращает RGB-код цвета в знакомом нам формате
<префикс>RRGGBB,
где RR, GG и BB — доля, соответственно, красной, зеленой и синей составляющей. Пример:
var color = Ext.getBody(). getColor("color", "#FFFFFF");
В переменной color окажется строка "#3B4043" — цвет текста наших Web-страниц. Мы не указали третий параметр метода getColor, поэтому возвращенное им значение имеет префикс по умолчанию — #.
Пример:
var color2 = Ext.getBody(). getColor("color", "#FFFFFF", "");
В переменной color2 окажется строка "3B4043". Третьим параметром мы передали
пустую строку, поэтому возвращенное методом getColor значение не имеет префикса (точнее, имеет — пустую строку).
Метод setStyle задает новое значение для указанного атрибута стиля. Он имеет два формата вызова:
<экземпляр объекта Element>.setStyle(<имя атрибута стиля>, <новое значение атрибута стиля>)
