Задание размеров элемента. Параметры метода

Добравшись до нужного элемента Web-страницы, мы можем начать работать с ним, например, получить и задать его размеры и местоположение с помощью описанных в этом разделе методов объекта Element.

Методы getWidth и getHeight возвращают, соответственно, ширину и высоту данного элемента Web-страницы в виде числа в пикселах:

<экземпляр объекта Element>.getWidth|getHeight([true])

Если этим методам не передавать никаких параметров, они вернут полную ширину и высоту элемента Web-страницы, с учетом рамки и внутренних отступов. Если же им передать значение true, они вернут ширину и высоту только содержимого элемента, без учета рамки и внутренних отступов.

Пример:

var iWidth = Ext.get("cmain").getWidth();

В переменной iWidth окажется полная ширина контейнера cmain.

Методы setWidth и setHeight задают, соответственно, ширину и высоту данного элемента Web-страницы:

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

Единственный параметр, передаваемый данным методам, — числовое значение ширины или высоты в пикселях:

Ext.get("cmain").setWidth(700);

Методы getX и getY возвращают, соответственно, горизонтальную и вертикальную координаты верхнего левого угла данного элемента Web-страницы в виде числа в пикселях. Координаты, возвращенные этими методами, отсчитываются относительно верхнего левого угла Web-страницы. Параметров эти методы не принимают.

Пример:

var elCMain = Ext.get("cmain");
var x = elCMain.getX();
var y = elCMain.getY();

Метод getOffsetTo возвращает смещение по горизонтали и вертикали данного элемента Web-страницы относительно другого элемента:

<экземпляр объекта Element>.getOffsetTo(<экземпляр объекта Element>)

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

Метод getOffsetTo возвращает массив из двух элементов (чисел в пикселах): первый представляет смещение по горизонтали, второй — по вертикали.

Пример:

var m = Ext.get("cmain").getOffsetTo(Ext.get("cnavbar"));
var x = m[0];
var y = m[1];

Здесь мы получим в переменных x и y, соответственно, горизонтальное и вертикальное смещения контейнера cmain относительно контейнера cnavbar.

Получение размеров Web-страницы и клиентской области окна Web-обозревателя

Также часто бывает нужно узнать размеры всей Web-страницы и внутренней части окна Web-обозревателя, в которой выводится содержимое Web-страницы (клиентской области окна). Для этого предназначены методы особого объекта Ext.lib.Dom.

Методы getDocumentWidth и getDocumentHeight возвращают полную, соответственно, ширину и высоту 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();

Получение и задание значений атрибутов тега

Часто приходится получать и задавать значения атрибутов тега, с помощью которого создан элемент 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 = "И что он там делает?..";