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

высоту Web-страницы в числовом виде в пикселах. Параметров они не принимают:

var pageWidth = Ext.lib.Dom.getDocumentWidth();

var pageHeight = Ext.lib.Dom.getDocumentHeight();

Методы getViewportWidth и getViewportHeight возвращают полную, соответственно, ширину и высоту клиентской области окна Web-обозревателя также в числовом виде и в пикселах. Параметров они не принимают:

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(<имя стилевого класса, удаляемого из привязки>, <имя стилевого класса, добавляемого в привязку>)

В качестве параметров этому методу передаются две строки с именами 'отвязываемого' и привязываемого стилевых классов: