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

Дронов Владимир

Получение и задание размеров и местоположения элемента Web-страницы

Добравшись до нужного элемента 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;

ВНИМАНИЕ!

Описанные здесь методы почему-то не документированы в справочнике по 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);