Если первый параметр не задан или с ним передана пустая строка, будет возвращен непосредственный родитель этого элемента.
Если вторым, также необязательным, параметром передано значение true, метод parent вернет экземпляр объекта Web-обозревателя HTMLElement.
Если подходящий родитель найден не будет, метод вернет значение null.
Здесь мы сначала получаем в переменной elNavbar "внешний" список navbar, формирующий полосу навигации, а потом в переменной elCNavbar — его непосредственного родителя:
var elNavbar = Ext.get("navbar");
var elCNavbar = elNavbar.parent();
Им окажется контейнер cnavbar.
А здесь мы пытаемся получить родителя списка navbar, который создан с помощью тега <SPAN>:
var elSpan = elNavbar.parent("SPAN");
Поскольку такого родителя у списка не существует, в переменной elSpan окажется значение null.
Метод select позволяет получить коллекцию дочерних элементов для данного элемента, удовлетворяющих заданному селектору, в виде экземпляра объекта CompositeElementLite:
<экземпляр объекта Element>.select(<селектор CSS>)
Единственным параметром этому методу передается строка с селектором или селекторами CSS.
Пример:
var clUL = elNavbar.select("LI > UL");
В переменной clUL окажется коллекция пунктов списка navbar, которые содержат вложенные списки.
Метод child возвращает первый встретившийся потомок данного элемента Web-страницы в виде экземпляра объекта Element:
<экземпляр объекта Element>.child([<селектор CSS>[, true]])
Первый, необязательный, параметр задает селектор CSS, которому должен удовлетворять потомок, в виде строки; можно также указать несколько селекторов через запятую. Если непосредственный потомок не удовлетворяет этому селектору, метод проверит потомки всех потомков данного элемента.
Если первый параметр не задан или с ним передана пустая строка, будут просматриваться все потомки данного элемента.
Если вторым, также необязательным, параметром передано значение true, метод child вернет экземпляр объекта Web-обозревателя HTMLElement.
Если подходящий потомок найден не будет, метод вернет значение null.
Пример:
var elUL = elNavbar.child();
В переменной elUL окажется первый пункт списка navbar.
Пример:
var elUL = elNavbar.child("LI: nodeValue=CSS");
В переменной elUL окажется пункт списка navbar, который содержит текст "CSS". Метод down отличается от метода child тем, что ищет только среди непосредственных потомков текущего элемента Web-страницы:
<экземпляр объекта Element>.down([<селектор CSS>[, true]])
Параметры метода down те же, что у методов parent и child.
Пример:
var elUL = elNavbar.down();
В переменной elUL окажется первый пункт списка navbar.
Методы next и prev возвращают, соответственно, следующий и предыдущий элемент Web-страницы того же уровня вложенности, что и данный элемент:
<экземпляр объекта Element>.next|prev([<селектор CSS>[, true]])
Параметры этих методов те же, что у методов parent и child.
Пример:
var elDiv = Ext.get("cmain"). next();
В переменной elDiv окажется контейнер ccopyright — следующий за контейнером cmain.
Пример:
var elP = elNavbar.prev();
В переменной elP окажется значение null, т. к. список navbar не имеет предыдущих элементов того же уровня вложенности и вообще является единственным потомком своего родителя.
Методы first и last возвращают, соответственно, первый и последний элемент Web-страницы того же уровня вложенности, что и данный элемент:
<экземпляр объекта Element>.first|last([<селектор CSS>[, true]])
Параметры этих методов те же, что у методов parent и child.
Пример:
var elCHeader = Ext.get("cmain"). first();
var elCCopyright = Ext.get("cmain"). last();
В переменной elCHeader окажется контейнер cheader, а в переменной elCCopyright — контейнер ccopyright. Это, соответственно, первый и последний из блочных контейнеров — "соседей" контейнера cmain.
Метод is возвращает true, если данный элемент Web-страницы совпадает с заданными селектором, и false в противном случае.
В примере из листинга 15.1 мы проверяем, создан ли контейнер cmain с помощью тега <P>. Разумеется, это не так.
Листинг 15.1
<экземпляр объекта Element>.is(<селектор CSS>)
var elCMain = Ext.get("cmain");
if (elCMain.is("P"))
var s = "Это абзац."
else
var s = "Это не абзац. Тьфу на него!";
Получение и задание размеров и местоположения элемента 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 — первый из изученных нами, где используется такой подход.
В качестве параметра этому методу передается
