В этом разделе мы будем изучать самые полезные для нас на данный момент возможности библиотеки Ext Core. Полностью она описана в справочнике, доступном на ее "домашнем" Web-сайте.
Зачем нужна библиотека Ext Core
Но зачем нужна эта библиотека? Почему бы нам не работать напрямую с объектами Web-обозревателя, обращаясь к их свойствам и вызывая их методы? Почему, чтобы управлять содержимым Web-страницы, нужны дополнительные инструменты и дополнительные сложности?
В том-то и дело, что библиотека Ext Core призвана устранять сложности, а не создавать их.
Вспомним, что мы узнали в главе 14. Web-обозреватель представляет саму Web-страницу и отдельные ее элементы в виде экземпляров особых объектов — объектов Web-обозревателя. В результате в памяти компьютера формируется структура
экземпляров объектов, представляющая содержимое Web-страницы. Она называется объектной моделью документа, или DOM.
Организация W3C требует, чтобы DOM соответствовала разработанному стандарту, тесно связанному со стандартами HTML и CSS. Разумеется, все Web- обозреватели его поддерживают.
Однако использовать объекты Web-обозревателя для программного управления Web-страницей очень нелегко. В основном, из-за того, что эти объекты предусматривают только самые базовые возможности для доступа к экземплярам объектов, представляющим нужные элементы Web-страницы, и управления ими. И зачастую этих возможностей слишком мало для комфортного программирования.
Нет, элементарные вещи, наподобие изменения цвета рамки элемента при наведении на него курсора мыши, действительно реализовать просто. Но если нам понадобится нечто более сложное, например, подгружать фрагмент содержимого Web- страницы из другого файла или скрывать и раскрывать часть содержимого элемента при щелчке на нем, мы будем вынуждены решать многочисленные проблемы, связанные с тем, что инструментов, предлагаемых стандартом DOM, окажется недостаточно.
Поэтому опытные Web-программисты и создают дополнительные библиотеки, добавляющие к инструментам, предусмотренным стандартом DOM, свои собственные, как правило, более мощные. К таким библиотекам относится и Ext Core.
Далее. Стандарт — стандартом, но разные Web-обозреватели зачастую по-разному его поддерживают. Сплошь и рядом возникают ситуации, когда один и тот же Web- сценарий прекрасно работает, скажем, в Firefox, но никак не хочет правильно исполняться в Internet Explorer. Ладно, Internet Explorer, как говорится, — отрезанный ломоть, до сих пор не получивший поддержку HTML 5 и CSS 3, но ведь и Opera, и Chrome, и Safari тоже поддерживают некоторые аспекты стандарта DOM по-своему. Налицо несовместимость Web-обозревателей, которую приходится как-то обходить.
К тому же, некоторые объекты Web-обозревателя до сих пор не стандартизированы, и, насколько известно автору, даже не было предпринято попытки их стандартизировать. К таким объектам относятся те, что представляют сам Web- обозреватель, в частности, объект Window.
Поэтому сторонние библиотеки, расширяющие возможности DOM, еще и устраняют несовместимость Web-обозревателей. И Ext Core — не исключение.
Сейчас такие библиотеки — Prototype, jQuery и "героиня" этой главы Ext Core — становятся все более и более популярными. Они применяются при программировании поведения для всех сложных Web-сайтов. В России даже выходят посвященные им книги; по крайней мере, автору встречалась книга, посвященная jQuery.
Ну а мы вернемся к Ext Core.
Использование библиотеки Ext Core
Библиотека Ext Core распространяется с Web-страницы http://www.extjs.com/products/core/?ref=family своего "домашнего" Web-сайта. На ней мы найдем гиперссылки на Web-страницы загрузки библиотеки, краткое руководство программиста с примерами и полный справочник по ней.
Библиотека Ext Core распространяется в виде архива ZIP, хранящегося в файле с именем вида ext-core-<номер версии>.zip и содержащего саму библиотеку, ее исходные коды в "читабельном" виде и несколько примеров. На момент написания книги была доступна версия 3.1.0, ее-то и использовал автор.
Сама библиотека Ext Core хранится в файле Web-сценария ext-core.js, который находится в описанном архиве. Она написана на языке JavaScript и представляет собой объявления многочисленных объектов, их свойств и методов и переменных, хранящих экземпляры объектов, — всем этим Web-программист будет активно пользоваться.
Код Ext Core нужно выполнить еще до загрузки Web-страницы, тогда библиотека сможет успешно создать все свои объекты, экземпляры объектов и переменные. Для этого в секцию тела Web-страницы (тег <HEAD>) помещают тег <SCRIPT> такого вида:
<SCRIPT SRC="ext-core.js"></SCRIPT>
Он указывает Web-обозревателю загрузить Web-сценарии, хранящиеся в файле ext- core.js и составляющие эту библиотеку, и выполнить их еще до того, как будет загружена секция тела Web-страницы. Таким образом, когда Web-страница будет выведена на экран, библиотека Ext Core окажется "во всеоружии".
Что касается Web-сценариев, составляющих поведение Web-страницы, то они хранятся в отдельном файле — так требует концепция Web 2.0. Тег <SCRIPT>, загружающий и выполняющий эти Web-сценарии, помещают в самом конце HTML-кода Web-страницы, перед закрывающим тегом </BODY>:
<SCRIPT SRC="<интернет-адрес файла Web-сценария, хранящего код поведения для Web-страницы>.js"></SCRIPT>
Любые Web-сценарии, выполняющие манипуляции с элементами Web-страницы, должны быть выполнены только после того, как Web-страница будет полностью загружена, а соответствующая ей DOM — сформирована. Но как этого добиться? Даже если мы поместим тег <SCRIPT>, загружающий и выполняющий их, в самом конце HTML-кода Web-страницы, проблемы это не решит. Ведь, даже если Web-страница уже загружена, формирование DOM Web-страницы будет продолжаться, и когда оно закончится — неизвестно.
Ext Core предоставляет нам элегантное решение: все Web-сценарии, которые должны быть выполнены после завершения загрузки Web-страницы, оформляются в виде тела функции, не принимающей параметров. Эта функция передается в качестве параметра методу onReady объекта Ext:
Ext.onReady(function() {
<код, выполняемый после загрузки Web-страницы> });
Метод onReady сохраняет переданную ему функцию в особом свойстве единственного экземпляра объекта Ext и впоследствии, когда Web-страница будет полностью загружена, а ее DOM — сформирована, вызывает ее.
Собственно, так мы и поступили в главе 14, когда создавали второй Web-сценарий.
Ключевые объекты библиотеки Ext Core
Как уже неоднократно говорилось, библиотека Ext Core объявляет несколько объектов, которые представляют различные элементы Web-страницы, специальные структуры данных, применяемые при программировании, и саму эту библиотеку. Настала пора рассмотреть некоторые из этих объектов хотя бы вкратце.
НА ЗАМЕТКУ
Язык JavaScript предоставляет средства для создания новых объектов либо "с нуля", либо на основе уже существующих. Однако эти средства довольно сложны, и начинающим Web-программистам они ни к чему. Поэтому мы не будем их рассматривать.
Прежде всего, это объект Ext, о котором мы уже наслышаны. Он предоставляет набор методов для доступа к нужному элементу Web-страницы, знакомый нам метод onReady и несколько служебных методов. Кроме того, он служит "вместилищем" для остальных объектов библиотеки Ext.
Единственный экземпляр объекта Ext создается самой библиотекой Ext Core и хранится в переменной Ext.
С объектом Element (точнее, Ext.Element, поскольку он хранится в объекте Ext) мы также знакомы по главе 14. Он представляет элемент Web-страницы, независимо от формирующего его тега.
Объект Element фактически заменяет "универсальный" объект Web-обозревателя HTMLElement и все созданные на его основе объекты, представляющие отдельные теги. Он поддерживает множество методов, позволяющих манипулировать элементом Web-страницы, привязывать к нему стилевые классы, задавать отдельные параметры стиля и вставлять в него другие элементы в качестве дочерних. Работать с экземплярами объекта Element несравнимо проще, чем с экземплярами объектов Web-обозревателя.
Экземпляры объекта Element можно получить только в результате вызова определенных методов этого же или других объектов.
Весьма примечательный объект CompositeElementLite (точнее, Ext.Composite- ElementLite) представляет массив экземпляров объекта Element (о массивах было рассказано в главе 14). Такие объекты-массивы называются коллекциями и, в отличие от обычных массивов, поддерживают дополнительный набор методов, позволяющих манипулировать отдельными экземплярами объектов, составляющими коллекцию (ее элементами).
Экземпляры объекта CompositeElementLite получают в результате вызова определенных методов других объектов. Они содержат экземпляры объекта Element, представляющие набор элементов Web-страницы, которые удовлетворяют некому критерию, например, селектору CSS.
Объект DomHelper (полное имя — Ext.DomHelper) служит для создания новых элементов Web-страницы на основе указанных тега, значений его атрибутов и содержимого. В результате получается экземпляр объекта Element, представляющий созданный элемент.
Единственный экземпляр объекта DomHelper создается самой библиотекой Ext Core и хранится в переменной Ext.DomHelper.
Объект EventObject (Ext.EventObject) служит для хранения сведений о возникшем в элементе Web-страницы событии. (О событиях будет рассказано далее, в соответствующем разделе.)
Экземпляр объекта EventObject создается самой библиотекой Ext Core и передается в функцию — обработчик события первым параметром.
Доступ к нужному элементу Web-страницы
В самом деле, перед тем как начать манипулировать элементом Web-страницы, точнее, представляющим его экземпляром объекта Element, нужно как-то получить к нему доступ. Как?
Здесь нам помогут методы объекта Ext, которые мы сейчас рассмотрим.
Метод get возвращает экземпляр объекта Element, представляющий определенный элемент Web-страницы:
Ext.get(<значение атрибута тега ID>|<экземпляр объекта HTMLElement>)
Как видим, этот метод принимает один параметр. Им может быть строка, содержащая значение атрибута тега ID, по которому будет выполняться поиск элемента Web-страницы.
Пример:
var elNavbar = Ext.get("navbar");
Здесь мы получили экземпляр объекта Element, представляющий "внешний" список navbar, что формирует полосу навигации.
В главе 7 мы узнали, что атрибут тега ID обеспечивает привязку к элементу Web- страницы именованного стиля. Но чаще всего он используется, чтобы дать элементу уникальное в пределах Web-страницы имя. В таком случае говорят, что такой-то элемент Web-страницы имеет такое-то имя, например, "внешний" список, формирующий нашу полосу навигации, имеет имя navbar.
Еще мы можем передать методу get экземпляр объекта HTMLElement, представляющий нужный нам элемент Web-страницы. Такой вызов данного метода применяют, если хотят создать на основе экземпляра объекта HTMLElement экземпляр объекта Element и получить в свои руки всю мощь Ext Core. Кстати, мы с этим потом столкнемся.
Метод get имеет важную особенность, о которой мы обязательно должны знать. Дело в том, что библиотека Ext Core при инициализации объявляет внутренний массив, или, если точнее, хэш (см. главу 14). При первом доступе к какому-либо элементу Web-страницы метод get создает представляющий данный элемент экземпляр объекта Element и помещает его в этот массив. При повторном доступе к тому же самому элементу Web-страницы соответствующий ему экземпляр объекта Element просто извлекается из данного массива. Такой подход позволяет значительно увеличить быстродействие, ведь извлечение элемента массива выполняется много быстрее, чем создание экземпляра объекта.
Сохранение каких-либо структур данных во внутреннем хранилище с целью ускорения к ним доступа называется кэшированием. А само это внутреннее хранилище (в случае библиотеки Ext Core — массив) называется кэшем.
Однако кэширование имеет и недостатки. Предположим, что мы создали Web-страницу с множеством элементов, которыми планируем управлять программно, из Web-сценариев. Причем доступ к каждому из этих элементов мы получаем всего один раз за все время, пока Web-страница открыта в Web-обозревателе, после чего больше их не трогаем. В результате кэш быстро "засорится" экземплярами объекта Element, что представляют не нужные нам более элементы Web-страницы. Что приведет к лишней трате памяти.
Поэтому создатели Ext Core предусмотрели метод fly, применяемый именно в таких случаях:
Ext.fly(<значение атрибута тега ID>|<экземпляр объекта HTMLElement>)
Он полностью аналогичен только что рассмотренному нами методу get с одним исключением — он кэширует элементы Web-страницы (в смысле — представляющие их экземпляры объекта Element) не в массиве, а в обычной переменной. Это значит, что в кэше хранится только элемент Web-страницы, к которому обращались при последнем вызове этого метода:
var elNavbar = Ext.fly("navbar");
Также метод fly работает быстрее, чем метод get, за счет того, что ему не нужно искать экземпляр объекта Element, соответствующего запрашиваемого элементу Web-страницы, в массиве, который может быть очень большим. Ему достаточно проверить всего одну переменную.
— Метод get следует использовать, если данный элемент Web-страницы понадобится нам в дальнейшем.
— Метод fly полезен, если нам требуется получить доступ к элементу Web-страницы всего один раз.
Не принимающий параметров метод getBody возвращает экземпляр объекта Element, представляющий секцию тела Web-страницы (тег <BODY>):
var elBody = Ext.getBody();
Метод getDom возвращает экземпляр объекта Web-обозревателя HTMLElement, представляющий определенный элемент Web-страницы:
Ext.getDom(<значение атрибута тега ID>|<экземпляр объекта Element>)
Этот метод принимает один параметр, которым может быть строка с именем элемента Web-страницы (значением атрибута ID его тега) или экземпляр объекта Element, представляющий этот элемент.
Пример:
var htelNavbar = Ext.getDom("navbar");
Здесь мы получили экземпляр объекта HTMLElement, представляющий "внешний" список navbar.
Пример:
var elCMain = Ext.get("cmain");
var htelCMain = Ext.getDom(elCMain);
Здесь мы в два этапа получили экземпляр объекта HTMLElement, представляющий контейнер cmain. На первом этапе мы с помощью метода get получили представляющий его экземпляр объекта Element библиотеки Ext Core, а на втором — вызовом метода getDom — экземпляр объекта HTMLElement Web-обозревателя.
Свойство dom объекта Element возвращает экземпляр объекта Web-обозревателя HTMLElement, представляющий элемент Web-страницы:
var elCMain = Ext.get("cmain");
var htelCMain = elCMain.dom;
Некоторые методы объектов библиотеки Ext Core требуют в качестве параметров экземпляр объекта HTMLElement. Так что свойство dom и метод getDom нам пригодятся.
Доступ сразу к нескольким элементам Web-страницы
Зачастую приходится выполнять одинаковые манипуляции не с одним, а сразу с несколькими элементами Web-страницы, соответствующие одному критерию (обычно это селектор CSS).
Метод select объекта Ext возвращает экземпляр объекта CompositeElementLite, содержащий экземпляры объекта Element, которые представляют все элементы Web-страницы, что удовлетворяют заданному селектору CSS:
Ext.select(<селектор CSS>)
Единственным параметром этому методу передается строка с одним или несколькими селекторами. Если строка содержит несколько селекторов, их отделяют друг от друга запятыми.
Библиотека Ext Core существенно расширяет набор селекторов по сравнению с поддерживаемыми стандартом CSS. Давайте их рассмотрим.
- <имя тега> — элемент, созданный с помощью тега.
- <имя тега 1> <имя тега 2> — элемент, созданный с помощью тега 2 и вложенный в тег 1, не обязательно непосредственно (может быть вложен в другой тег, вложенный в тег 1, или даже в несколько таких тегов последовательно).
- <имя тега 1> > <имя тега 2> или <имя тега 1>/<имя тега 2> — элемент, созданный с помощью тега 2 и непосредственно вложенный в тег 1.
- <имя тега 1> + <имя тега 2> — элемент, созданный с помощью тега 2, которому непосредственно предшествует тег 1 того же уровня вложенности.
- <имя тега 1> ~ <имя тега 2> — элемент, созданный с помощью тега 2, которому предшествует тег 1 того же уровня вложенности, не обязательно непосредственно.
- * — элемент, созданный с помощью любого тега.
-.<имя стилевого класса> — элемент с привязанным стилевым классом.
- [<имя атрибута тега>] — элемент, тег которого включает атрибут.
- [<имя атрибута тега>=<значение>] — элемент, тег которого включает атрибут с заданным значением.
- [<имя атрибута тега>!=<подстрока>] — элемент, тег которого включает атрибут со значением, не равным подстроке.
- [<имя атрибута тега>^=<подстрока>] — элемент, тег которого включает атрибут со значением, начинающимся с заданной подстроки.
- [<имя атрибута тега>$=<подстрока>] — элемент, тег которого включает атрибут со значением, заканчивающимся заданной подстрокой.
- [<имя атрибута тега>*=<подстрока>] — элемент, тег которого включает атрибут со значением, включающим заданную подстроку.
- [<имя атрибута тега>%=2] — элемент, тег которого включает атрибут со значением, которое без остатка делится на 2.
-:first-child — первый потомок данного элемента.
-:last-child — последний потомок данного элемента.
-:only-child — единственный потомок данного элемента.
-:nth-child(<номер>) — потомок данного элемента с заданным номером.
-:nth-child(even) или: even — четные потомки данного элемента.
-:nth-child(odd) или: odd — нечетные потомки данного элемента.
-:first — первый элемент из соответствующих селектору.
-:last — последний элемент из соответствующих селектору.
-:nth(<номер>) — элемент с заданным номером из соответствующих селектору.
-:contains(<подстрока>) — элемент, содержимое которого включает заданную подстроку.
-:nodeValue(<подстрока>) — элемент, содержимое которого равно заданной подстроке.
-:not(<селектор>) — элемент, не удовлетворяющий селектору.
-:has(<селектор>) — элемент, который имеет хотя бы один потомок, удовлетворяющий селектору.
-:next(<селектор>) — элемент, следующий за которым элемент того же уровня вложенности удовлетворяет селектору.
-:prev(<селектор>) — элемент, предшествующий которому элемент того же уровня вложенности удовлетворяет селектору.
- {<имя атрибута стиля>=<значение>} — элемент, стиль которого имеет атрибут с заданным значением.
- {<имя атрибута стиля>!=<подстрока>} — элемент, стиль которого имеет атрибут со значением, не равным заданной подстроке.
- {<имя атрибута стиля>^=<подстрока>} — элемент, стиль которого имеет атрибут со значением, начинающимся с заданной подстроки.
- {<имя атрибута стиля>$=<подстрока>} — элемент, стиль которого имеет атрибут со значением, заканчивающимся заданной подстрокой.
- {<имя атрибута стиля>*=<подстрока>} — элемент, стиль которого имеет атрибут со значением, включающим заданную подстроку.
- {<имя атрибута стиля>%=2} — элемент, стиль которого имеет атрибут со значением, без остатка делящимся на 2.
Если ни один подходящий элемент Web-страницы не был найден, метод select возвращает экземпляр объекта CompositeElementLite, не содержащий ни одного экземпляра объекта Element ("пустую" коллекцию).
Здесь мы получаем экземпляр объекта CompositeElementLite, содержащий экземпляры объекта Element, которые представляют все блочные контейнеры:
var clContainers = Ext.select("DIV");
А здесь мы получаем блочный контейнер cmain:
var clContainers = Ext.select("DIV[id=cmain]");
Здесь мы получаем все пункты "внешнего" списка navbar, формирующего полосу навигации:
var clOuterItems = Ext.select("UL[id=navbar] > LI");
А здесь мы получаем все первые абзацы, непосредственно вложенные в контейнеры:
var clP = Ext.select("DIV > P: first");
Здесь мы получаем все горизонтальные линии, которым непосредственно предшествуют абзацы того же уровня вложенности:
var clHR = Ext.select("P + HR");
А здесь мы получаем все абзацы и теги адреса на Web-странице:
var clPA = Ext.select("P, ADDRESS");
Доступ к родительскому, дочерним и соседним элементам Web-страницы
Теперь предположим, что мы наконец-то получили нужный нам элемент Web- страницы и хотим найти его родителя, потомка или "соседей" по уровню вложенности. Для этого Ext Core предоставляет нам множество методов объекта Element, которые будут описаны далее.
Метод parent возвращает родитель данного элемента Web-страницы в виде экземпляра объекта Element:
<экземпляр объекта Element>.parent([<селектор CSS>[, true]])
Первый, необязательный, параметр задает селектор CSS, которому должен удовлетворять родитель, в виде строки; можно также указать несколько селекторов через запятую. Если непосредственный родитель не удовлетворяет этому селектору, метод проверит родитель родителя и т. д., пока не будет найден подходящий элемент или достигнут тег с нулевым уровнем вложенности (тег <HTML>).
Если первый параметр не задан или с ним передана пустая строка, будет возвращен непосредственный родитель этого элемента.
Если вторым, также необязательным, параметром передано значение 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 — первый из изученных нами, где используется такой подход.
В качестве параметра этому методу передается экземпляр объекта 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(<имя атрибута стиля>, <новое значение атрибута стиля>)
Первым параметром в этом случае передается имя нужного атрибута стиля, а вторым — его новое значение. Оба эти значения передаются в виде строк.
Пример:
Ext.getBody(). setStyle("color", "black");
Здесь мы задаем для цвета текста всей Web-страницы новое значение — black.
Также мы можем передать методу setStyle единственный параметр — конфигуратор. Его свойства должны соответствовать атрибутам стиля, а значения свойств станут новыми значениями этих атрибутов стиля:
<экземпляр объекта Element>.setStyle(<конфигуратор>)
Пример:
Ext.getBody(). setStyle({ color: "black", background-color: "white" });
Здесь мы задаем новые значения цвета сразу для текста и фона Web-страницы. Метод setOpacity задает новое значение полупрозрачности для данного элемента
Web-страницы:
<экземпляр объекта Element>.setOpacity(<новое значение>)
Новое значение полупрозрачности передается в виде числа от 0 (полная прозрачность) до 1 (полная непрозрачность):
Ext.get("cheader"). setOpacity(0.5);
Метод clearOpacity делает данный элемент Web-страницы полностью непрозрачным. Он не принимает параметров:
Ext.get("cheader"). clearOpacity();
Метод clearOpacity рекомендуется применять, чтобы сделать элемент Web-страницы непрозрачным. Вызов метода setOpacity с параметром, равным нулю, может не дать ожидаемых результатов в некоторых Web-обозревателях.
Метод setDisplayed задает новое значение атрибута стиля display:
<экземпляр объекта Element>.setDisplayed(<новое значение>)
Этому методу можно передать строку с новым значением атрибута стиля display. Также можно передать значение true или false; первое значение выведет данный элемент Web-страницы на экран, второе скроет его.
Пример:
Ext.get("cheader"). setDisplayed(false); Ext.get("cheader"). setDisplayed("none");
Оба выражения выполняют одно и то же действие — скрывают контейнер cnavbar.
Управление видимостью элементов Web-страницы
Еще библиотека Ext Core предлагает нам несколько методов объекта Element, позволяющих скрывать элементы Web-страницы и снова их показывать.
Метод setVisibilityMode позволяет указать, с помощью какого атрибута стиля будет выполняться скрытие и показ данного элемента Web-страницы: display или visibility. (Эти атрибуты стиля были описаны в главе 9.)
<экземпляр объекта Element>.setVisibilityMode(<имя атрибута стиля>)
Единственным параметром этому методу передается строка с именем нужного атрибута стиля. Мы можем использовать значения свойств Ext.Element.DISPLAY и Ext.Element.VISIBILITY; первое свойство хранит имя атрибута стиля display, второе — visibility.
Пример:
Ext.get("navbar"). setVisibilityMode(Ext.Element.DISPLAY);
Если метод setVisibilityMode для данного элемента Web-страницы ни разу не был вызван, для управления видимостью элемента Web-страницы будет использован атрибут стиля visibility.
Метод setVisible скрывает или снова выводит данный элемент Web-страницы на экран:
<экземпляр объекта Element>.setVisible(true|false)
Если методу передано значение true, данный элемент Web-страницы будет выведен на экран, если же передано значение false — он будет скрыт:
Ext.get("navbar"). setVisible(false);
Методы show и hide, соответственно, показывают и скрывают данный элемент Web-страницы. Они не принимают параметров:
Ext.get("navbar"). show();
Метод toggle скрывает данный элемент Web-страницы, если он присутствует на экране, и выводит на экран, если он скрыт. Он не принимает параметров:
Ext.get("navbar"). toggle();
Метод isVisible возвращает true, если данный элемент Web-страницы видим, и false, если невидим. Он не принимает параметров.
Пример:
var elNavbar = Ext.get("navbar");
if (elNavbar.isVisible())
elNavbar.show();
Кроме того, управлять видимостью элемента Web-страницы можно методом setDisplayed, рассмотренным в предыдущем разделе. Этот метод для скрытия и открытия элемента всегда использует атрибут стиля display.
Добавление и удаление элементов Web-страницы
А теперь — высший пилотаж Web-программирования! Программное добавление на Web-страницу новых элементов и программное же их удаление. Для этого применяют методы объекта DomHelper.
Метод append добавляет новый элемент Web-страницы в качестве потомка в конец указанного элемента:
Ext.DomHelper.append(<элемент — будущий родитель>, <конфигуратор> [, true])
Первый параметр — элемент Web-страницы, который станет родителем для вновь создаваемого элемента. Это может быть либо строка с именем элемента, либо представляющий его экземпляр объекта Element.
Второй параметр — конфигуратор, задающий тег, содержимое и значения атрибутов тега создаваемого элемента Web-страницы.
Все эти параметры задают в следующих свойствах конфигуратора:
— tag — имя тега в виде строки;
— html — HTML-код, представляющий содержимое элемента;
— cls — стилевой класс, который будет привязан к элементу;
— children или cn — массив конфигураторов, представляющих потомки данного элемента;
- <имя атрибута тега> — значение соответствующего атрибута тега.
Метод append возвращает экземпляр объекта HTMLElement, представляющий созданный элемент Web-страницы. Но если мы передадим в качестве третьего, необязательного, параметра значение true, он вернет более удобный в работе и уже привычный для нас экземпляр объекта Element.
Листинг 15.2
var oConf = { tag: "P", html: "Привет от Web-сценария!", cls: "someclass", id: "newparagraph" }
Ext.DomHelper.append("cmain", oConf);
В листинге 15.2 мы добавили в конец контейнера cmain новый абзац, имеющий следующие параметры:
— тег — <P> (задан свойством tag конфигуратора);
— содержимое — текст "Привет от Web-сценария!" (задано свойством html конфигуратора);
— стилевой класс — someclass (свойство cls);
— имя — newparagraph (свойство id, соответствующее атрибуту тега ID).
Чтобы свежедобавленному абзацу не было скучно, мы добавили сразу же после него маркированный список из трех пунктов (листинг 15.3).
Листинг 15.3
var oConf2 = { tag: "UL", children: [
{ tag: "LI", html: "Первый пункт" },
{ tag: "LI", html: "Второй пункт" },
{ tag: "LI", html: "Третий пункт" }
]
};
Ext.DomHelper.append("cmain", oConf2);
Пункты списка мы задали с помощью свойства children конфигуратора. Этому свойству мы присвоили массив, каждый из элементов которого представляет собой конфигуратор, описывающий параметры одного из пунктов списка.
Метод insertFirst аналогичен только что рассмотренному нами методу append за тем исключением, что вставляет созданный элемент Web-страницы в самое начало указанного элемента:
Ext.DomHelper.insertFirst(<элемент — будущий родитель>, <конфигуратор> [, true])
Как видим, этот метод принимает те же параметры, что и метод append.
Пример:
Ext.DomHelper.insertFirst("cmain", oConf);
Это выражение вставляет абзац, описываемый конфигуратором oConf, в самое начало контейнера cmain.
Методы insertBefore и insertAfter вставляют созданный элемент Web-страницы, соответственно, перед и после данного элемента на том же уровне вложенности:
Ext.DomHelper.insertBefore|insertAfter(<элемент — будущий "сосед">, <конфигуратор>[, true])
Первым параметром передается либо строка с именем элемента Web-страницы, который станет "соседом" вновь созданного элемента, либо представляющий его экземпляр объекта Element. Остальные параметры аналогичны соответствующим параметрам метода append.
Пример:
var oConf3 = { tag: "HR" } Ext.DomHelper.insertBefore("navbar", oConf3); Ext.DomHelper.insertAfter("navbar", oConf3);
Мы только что поместили до и после списка navbar горизонтальные линии.
Метод insertHtml позволяет создать новый элемент Web-страницы на основе строки с его HTML-кодом и поместить его возле указанного элемента или в него в качестве потомка:
Ext.DomHelper.insertHtml(<местоположение>, <элемент — будущий "сосед" или родитель>, <HTML-код>)
Первый параметр — строка, указывающая, куда будет помещен созданный методом элемент Web-страницы:
— "beforeBegin" — созданный элемент будет помещен перед открывающим тегом указанного элемента и станет его предыдущим "соседом" по уровню вложенности;
— "afterBegin" — созданный элемент будет помещен после открывающего тега указанного элемента и станет его первым потомком;
— "beforeEnd" — созданный элемент будет помещен перед закрывающим тегом указанного элемента и станет его последним потомком;
— "afterEnd" — созданный элемент будет помещен после закрывающего тега указанного элемента и станет его следующим "соседом" по уровню вложенности.
Второй параметр — элемент Web-страницы, который станет "соседом" или родителем для вновь создаваемого элемента. Это должен быть представляющий его экземпляр объекта HTMLElement (не Element!).
Третий параметр — строка с HTML-кодом, с помощью которого будет создан новый элемент.
Метод insertHtml возвращает экземпляр объекта HTMLElement, представляющий созданный элемент Web-страницы. К сожалению, указать ему вернуть экземпляр объекта Element мы не можем.
Пример:
var htelCMain = Ext.getDom("cmain"); Ext.DomHelper.insertHtml("afterBegin", htelCMain, "<P ID=\"newparagraph\" CLASS=\"someclass\"></P>");
Здесь мы добавили в начало контейнера cmain новый абзац с именем newparagraph и привязанным к нему стилевым классом someclass.
Пример:
var htelNavbar = Ext.getDom("navbar"); Ext.DomHelper.insertHtml("beforeBegin", htelNavbar, "<HR>"); Ext.DomHelper.insertHtml("afterEnd", htelNavbar, "<HR>");
А здесь мы поместили до и после списка, формирующего полосу навигации, горизонтальные линии HTML.
Метод overwrite создает новый элемент Web-страницы и помещает его внутрь указанного элемента, заменяя все его предыдущее содержимое:
Ext.DomHelper.overwrite(<элемент — будущий родитель>, <конфигуратор>|<HTML-код>[, true])
Первый параметр — элемент Web-страницы, который станет родителем для вновь создаваемого элемента. Это может быть либо строка с именем элемента, либо представляющий его экземпляр объекта Element.
Второй параметр — либо конфигуратор, описывающий параметры создаваемого элемента, либо строка с HTML-кодом, на основе которого он будет создан.
Метод overwrite возвращает экземпляр объекта HTMLElement, представляющий созданный элемент Web-страницы. Но если мы передадим в качестве третьего, необязательного, параметра значение true, он вернет экземпляр объекта Element.
Пример:
var oConf4 = { tag: "P", html: "Новое содержимое контейнера."}Ext.DomHelper.overwrite("cmain", oConf4);
Здесь мы создаем новый абзац и помещаем его в контейнер cmain, полностью заменяя его предыдущее содержимое.
Метод markup принимает в качестве единственного параметра конфигуратор и возвращает строку с созданным на его основе HTML-кодом.
Пример:
Ext.DomHelper.markup(<HTML-код>)
var s = Ext.DomHelper.markup(oConf4);
В переменной s окажется строка "<P>Новое содержимое контейнера.</P>".
Создавать новые элементы Web-страницы мы можем также с помощью рассмотренных далее методов объекта Element. Вероятно, во многих случаях они будут удобнее.
Метод createChild создает новый элемент Web-страницы и делает его потомком данного элемента:
<экземпляр объекта Element>.createChild(<конфигуратор> [, <элемент, перед которым будет вставлен созданный элемент>])
Первым параметром данному методу передается конфигуратор, описывающий параметры создаваемого элемента Web-страницы.
Если второй параметр опущен, созданный элемент Web-страницы будет помещен в самом конце данного элемента и станет его последним потомком. Если же в качестве его передать какой-либо элемент-потомок в виде экземпляра объекта Element, создаваемый элемент будет вставлен перед ним.
Метод createChild возвращает экземпляр объекта Element, представляющий созданный элемент.
Пример:
var elCMain = Ext.get("cmain");
elCMain.createChild(oConf, elCMain.first());
Здесь мы вставляем абзац, описываемый конфигуратором oConf, в самое начало контейнера cmain — перед первым его потомком.
Метод insertFirst принимает в качестве параметра конфигуратор, создает на его основе элемент Web-страницы и помещает его в начало данного элемента в качестве его первого потомка:
<экземпляр объекта Element>.insertFirst(<конфигуратор>) Ext.get("cmain"). createChild(oConf);
Метод replaceWith принимает в качестве параметра конфигуратор, создает на его основе элемент Web-страницы и полностью заменяет им данный элемент.
В примере из листинга 15.4 мы удаляем полностью контейнер cmain и помещаем на его место другой контейнер, описываемый конфигуратором oCont5, с новым содержимым и тем же именем.
Листинг 15.4
<экземпляр объекта Element>.replaceWith(<конфигуратор>)
var oConf5 = { tag: "DIV", html: "<P>Новый контейнер с новым содержимым.</P>", id: "cmain"
} Ext.get("cmain"). replaceWith(oConf5);
Метод wrap принимает в качестве параметра конфигуратор, создает на его основе элемент Web-страницы и помещает в него данный элемент, делая его потомком созданного элемента:
<экземпляр объекта Element>.wrap([<конфигуратор>])
Как видим, при вызове этого метода мы можем не указывать конфигуратор. В таком случае метод wrap создаст блочный контейнер на основе тега <DIV>.
Пример:
Ext.select("UL[id=navbar]"). wrap();
Здесь мы заключаем список navbar, формирующий полосу навигации, в блочный контейнер. Обратим внимание, что мы не передали методу wrap никаких параметров — он сам "поймет", что именно блочный контейнер мы хотим создать.
А в следующем примере мы заключаем все абзацы, непосредственно вложенные в контейнер cmain, в большие цитаты:
Ext.select("DIV[id=cmain] > P"). wrap({ tag: "BLOCKQUOTE" });
Да, библиотека Ext Core представляет весьма мощные средства для создания новых элементов Web-страницы. К сожалению, удалить ненужные элементы можно
только методом remove объекта Element. Он немедленно удаляет данный элемент Web- страницы со всем его содержимым, не принимает параметров и не возвращает значения.
Пример:
Ext.get("cmain"). remove();
Здесь мы удаляем контейнер cmain со всем его содержимым.
Обработка событий
Теперь самое время рассмотреть один ключевой вопрос Web-программирования: события, их возникновение и обработка.
Понятие события и его обработки
Рассматривая примеры Web-сценариев, мы исходили из предположения, что они выполняются при загрузке Web-страницы. Как мы уже знаем из главы 14, Web- сценарий исполняется в том месте HTML-кода Web-страницы, в котором присутствует создающий его тег <SCRIPT>. При этом неважно, является Web-сценарий внутренним (помещенном прямо в HTML-код) или внешним (хранящимся в отдельном файле Web-сценария).
Однако существует большая группа Web-сценариев, которые выполняются при возникновении определенного события, к которому эти Web-сценарии были привязаны. О них-то и пойдет сейчас разговор.
Событием в терминологии Web-программирования называется некое условие, которое возникает в Web-обозревателе в ответ на действия посетителя или в процессе работы самого Web-обозревателя. Так, щелчок левой кнопкой мыши на элементе Web-страницы приводит к возникновению события "щелчок левой кнопкой мыши", а перемещение курсора мыши над элементом Web-страницы — "перемещение курсора мыши". Нажатие клавиши на клавиатуре приводит к возникновению события "нажатие клавиши", а ошибка в загрузке изображения — "ошибка загрузки".
Существует много разнообразных событий, как говорится, на все случаи жизни. Ежесекундно их возникает десятки, если не сотни.
Так вот, мы можем заставить Web-сценарий выполняться в ответ на возникновение определенного события в определенном элементе Web-страницы. Для этого нужный Web-сценарий особым образом привязывается к данному элементу Web- страницы и событию. Такие Web-сценарии называются обработчиками событий.
Что может делать обработчик события? Да что угодно! При наведении курсора мыши он может привязывать к элементу Web-страницы другой стилевой класс, меняя его представление. (Именно такой обработчик события мы создали в главе 14.) При щелчке левой кнопкой мыши на элементе Web-страницы — разворачивать или сворачивать блочный контейнер, открывая или скрывая его содержимое. А при изменении размеров окна Web-обозревателя — менять размеры блочных контейнеров, чтобы полностью занять ими клиентскую область окна.
Теперь уясним следующие моменты, связанные с обработчиками событий.
— Обработчик события оформляется в виде функции, которая принимает два параметра. Подробнее об этом мы поговорим потом.
— Обработчик события привязывается к конкретному элементу Web-страницы, в котором возникают события, требующие обработки. Так, если нужно обработать событие "щелчок левой кнопкой мыши" в каком-либо абзаце, обработчик привязывается к данному абзацу.
— Обработчик события привязывается к конкретному событию. Так, если мы привязали обработчик к событию "щелчок левой кнопкой мыши", он будет выполняться только при возникновении именно этого события. Другие события, скажем, "двойной щелчок левой кнопкой мыши", он обрабатывать не будет.
— Обработчик события выполняется только при возникновении заданного события в элементе Web-страницы, к которому он привязан. Во время загрузки Web- страницы он не выполняется.
— Мы можем привязать один и тот же обработчик сразу к нескольким элементам Web-страницы и нескольким событиям. Так, один и тот же обработчик может обрабатывать событие "щелчок левой кнопкой мыши" в абзаце и в гиперссылке. Кстати, так часто и делают.
События объекта Element
Самые полезные для нас на данный момент события, поддерживаемые объектом Element библиотеки Ext Core, представлены в табл. 15.1. Их довольно много, и некоторые из них поддерживаются только определенными элементами Web- страницы.
Таблица 15.1. События объекта Element
Привязка и удаление обработчиков событий
Метод on объекта Element выполняет привязку указанной функции к указанному событию данного элемента Web-страницы в качестве обработчика:
<экземпляр объекта Element>.on(<событие>, <функция-обработчик>)
Первым параметром методу передается строка с названием события, к которому выполняется привязка обработчика. Названия событий приведены в первом столбце табл. 15.1.
Второй параметр — функция, которая станет обработчиком события. Эта функция должна принимать следующие параметры:
— первый — экземпляр объекта EventObject, представляющий сведения о событии и позволяющий им управлять (мы рассмотрим этот объект потом);
— второй — экземпляр объекта HTMLElement, представляющий элемент Web-страницы, в котором изначально возникло данное событие.
Кроме того, в функцию-обработчик неявно передается еще один параметр — экземпляр объекта HTMLElement, представляющий элемент Web-страницы, в котором в данный момент обрабатывается данное событие, — тот самый элемент, к которому привязан этот обработчик. Событие могло возникнуть в нем изначально, а могло всплыть из дочернего элемента; подробнее об этом будет рассказано в следующем разделе. Данный параметр доступен в теле функции-обработчика через переменную this.
Пример:
Ext.get("navbar"). on("mouseover", function(e, t) { Ext.get(this). addClass("hovered");});
Здесь мы привязываем к списку navbar обработчик события mouseover. Первый параметр метода on определяет название события, которое мы хотим обрабатывать. Второй параметр этого метода содержит объявление функции-обработчика.
В теле функции-обработчика мы обращаемся к переменной this, чтобы получить экземпляр объекта HTMLElement, представляющий элемент Web-страницы, чье событие мы обрабатываем. Чтобы получить из него соответствующий экземпляр объекта Element, мы используем метод get. После чего привязываем к полученному экземпляру объекта Element стилевой класс hovered вызовом метода addClass.
Отметим, что наша функция-обработчик принимает два параметра, которые, впрочем, нигде в ее теле не используются. Так что мы можем вообще не указывать их в объявлении функции-обработчика:
Ext.get("navbar"). on("mouseover", function() {Ext.get(this). addClass("hovered");});
Мы можем оформить обработчик события в виде функции, имеющей имя, а потом указать это имя в качестве второго параметра метода on:
function navbarMouseOver() { Ext.get(this). addClass("hovered");}
Ext.get("navbar"). on("mouseover", navbarMouseOver);
Это полезно, если мы хотим привязать один обработчик сразу к нескольким событиям одного или нескольких элементов Web-страницы.
Метод removeAllListeners объекта Element удаляет все привязанные к данному элементу Web-страницы обработчики событий. Он не принимает параметров.
Пример:
Ext.get("navbar"). removeAllListeners();
Всплытие и действие по умолчанию
И еще два важных вопроса, без понимания которых невозможно писать эффективные обработчики событий, — всплытие событий и их действия по умолчанию.
Давайте рассмотрим пункты списков, формирующих полосу навигации, и "внешнего", и вложенного. Мы привязали к ним обработчики событий mouseOver и mouseOut — это выполняет второй Web-сценарий, написанный нами в главе 14. Его фрагмент приведен в листинге 15.5.
Листинг 15.5
var ceLinks = Ext.select("UL[id=navbar] LI"); ceLinks.on("mouseover", function(e, t) { Ext.get(this). addClass("hovered");});
ceLinks.on("mouseout", function(e, t) { Ext.get(this). removeClass("hovered");});
Откроем Web-страницу index.htm в Web-обозревателе и наведем курсор мыши на пункт "HTML" "внешнего" списка. Рамка вокруг него тотчас станет более темной. Уберем курсор — и рамка примет прежний цвет. Обработчики событий mouseOver и mouseOut работают.
Теперь наведем курсор мыши на один из пунктов вложенного списка, например, "AUDIO". Вокруг этого пункта также появится рамка. Что и неудивительно, ведь к пунктам вложенного списка также привязаны обработчики соответствующих событий.
Но при этом изменит свой цвет и рамка вокруг пункта "HTML" "внешнего" списка! Выходит, данные события возникают не только в пункте "AUDIO" вложенного списка, но и в пункте "HTML" "внешнего" списка, в который он вложен. Почему?
Вот тут мы столкнулись со всплытием событий. Событие, возникшее в каком-либо элементе Web-страницы, после этого возникает в его родителе, далее в родителе родителя и т. д., пока оно не достигнет секции тела Web-страницы (тега <BODY>). Можно сказать, что событие "всплывает" из элемента в элемент "вверх" по уровню их вложенности друг в друга.
Давайте рассмотрим всплытие событий на примере нашей полосы навигации. Мы наводим курсор мыши на пункт "AUDIO" вложенного списка. В нем (в теге <LI>) возникает событие mouseOver. Поскольку к данному пункту списка привязан обработчик этого события, Web-обозреватель его выполняет. Далее событие "всплывает" в сам вложенный список (тег <UL>). Никаких обработчиков событий мы к нему не привязали, поэтому событие сразу же следует в пункт "HTML" "внешнего" списка, в котором находится вложенный список. К нему, опять же, привязан обработчик события mouseOver, который выполняется Web-обозревателем. Далее событие "всплывает" во "внешний" список, контейнер cnavbar и секцию тела Web-страницы, в которой и прекращает свое существование.
Теперь посмотрим на пункт "AUDIO" вложенного списка. В него вложен тег <CODE>, в который, в свою очередь, вложена гиперссылка (тег <A>), а в нее — уже текст "AUDIO". Когда мы наводим курсор мыши на этот текст, событие mouseOver возникает-то в теге <A>! Потом оно "всплывает" в тег <CODE>, а уже после этого — в тег <LI>, формирующий пункт списка "AUDIO", где и обрабатывается.
А сейчас представим, что событие mouseOver не всплывает. Тогда, чтобы обработать его в пункте вложенного списка, нам пришлось бы привязывать разные обработчики к тегам <LI>, <CODE> и <A>. Представляете, сколько потребуется кода! Который в этом случае будет еще и заметно сложнее…
Так что всплытие событий — благо для Web-программиста. Благодаря ему мы можем писать обработчики, реагирующие на события сразу в нескольких элементах Web-страницы, — для этого достаточно привязать обработчик к родителю этих элементов. Так, кстати, часто и делают.
Теперь об обработке всплывающих событий. Мы уже знаем, что функция — обработчик события принимает три параметра: два — явно, третий — неявно.
— Первый явный параметр — экземпляр объекта EventObject, хранящий сведения о событии. Разговор о нем пока отложим.
— Второй явный параметр — экземпляр объекта HTMLElement, представляющий элемент Web-страницы, в котором изначально возникло это событие. Отметим — возникло изначально, т. е. событие гарантированно не всплыло в него из какого-либо дочернего элемента.
— Неявный параметр, доступный в теле функции-обработчика через переменную this, — экземпляр объекта HTMLElement, представляющий элемент Web-страницы, в котором это событие обрабатывается, т. е. тот элемент, к которому привязан обработчик. Причем событие могло как возникнуть в этом элементе изначально, так и всплыть из дочернего элемента.
Если событие всплыло в данный элемент Web-страницы из дочернего элемента, то оба эти параметра указывают на разные элементы Web-страницы. Помните об этом!
Ради эксперимента давайте изменим код второго Web-сценария, написанного в главе 14, так, как показано в листинге 15.6.
Листинг 15.6
var ceLinks = Ext.select("UL[id=navbar] LI"); ceLinks.on("mouseover", function(e, t) { Ext.get(t). addClass("hovered");});
ceLinks.on("mouseout", function(e, t) { Ext.get(t). removeClass("hovered");});
Здесь мы в теле функций-обработчиков получаем не элемент, в котором обрабатывается событие (переменная this), а элемент, в котором это событие изначально возникло (второй параметр этих функций t). Что получится в результате?
Наведем курсор мыши на текст пункта "AUDIO" списка. В теге <A> возникнет событие mouseover, которое потом всплывет в тег <CODE> и далее — в тег <LI>. В теге <LI> оно и будет обработано. Только стилевой класс hovered в результате будет привязан не к тегу <LI>, а к тегу <A>! А поскольку для этого тега больше никаких параметров рамки не задано (стилевой класс hovered задает только цвет рамки — см. главу 14), рамка вокруг него не появится. Совсем другой результат!
В табл. 15.1, перечисляющей события объекта Element, прямо указано, какие события всплывают, а какие — нет. Да-да, не все события относятся к всплывающим… Но такие "невсплывающие" события обычно очень специфичны и требуют обработки, что называется, на месте.
Многие из всплывающих событий поддерживают возможность прерывания их всплытия на любом уровне. Это реализуется особым методом объекта EventObject, представляющем сведения о событии. Мы рассмотрим его чуть позже.
Некоторые события, возникшие в определенных элементах Web-страницы, Web-обозреватель обрабатывает сам, реализуя так называемое действие по умолчанию. Так, действие по умолчанию для события click в гиперссылке — переход на целевую Web-страницу, а для события focus — получение гиперссылкой фокуса ввода.
Обработчик, привязанный к событию, для которого Web-обозреватель выполняет действие по умолчанию, выполняется перед тем, как действие по умолчанию будет выполнено. Это предоставляет возможность отмены действия по умолчанию (не для всех событий) — вызовом особого метода все того же объекта EventObject. Мы рассмотрим данный метод очень скоро.
Получение сведений о событии. Объект EventObject
Мы уже знаем, что первый параметр функции-обработчика события хранит экземпляр объекта EventObject, содержащий сведения о событии и позволяющий им управлять. Давайте рассмотрим некоторые методы этого объекта, которые будут для нас наиболее полезны.
Метод getCharCode возвращает код алфавитно-цифрового символа, введенного с клавиатуры, в кодировке Unicode в виде числа. Он не принимает параметров.
Коды алфавитно-цифровых символов можно узнать с помощью утилиты Таблица символов, поставляемой в составе Windows.
Метод getKey возвращает код нажатой на клавиатуре клавиши в кодировке Unicode в виде числа. Он не принимает параметров.
Коды клавиш клавиатуры можно найти на Web-странице http://msdn.microsoft.com/en-us/library/ms927178.aspx.
Методы getPageX и getPageY возвращают, соответственно, горизонтальную и вертикальную координаты курсора мыши относительно Web-страницы в виде чисел в пикселах. Они не принимают параметров.
Метод preventDefault отменяет действия по умолчанию для события. Он не принимает параметров и не возвращает значения.
Метод stopPropagation отменяет дальнейшее всплытие события. Он не принимает параметров и не возвращает значения.
Метод stopEvent отменяет действия по умолчанию для события и отменяет его дальнейшее всплытие. Фактически он объединяет действие методов preventDefault и stopPropagation. Этот метод также не принимает параметров и не возвращает значения.
Мы можем исправить код нашего второго Web-сценария, написанного в главе 14, как показано в листинге 15.7, и посмотреть, что получится.
Листинг 15.7
var ceLinks = Ext.select("UL[id=navbar] LI");
ceLinks.on("mouseover", function(e, t) { Ext.get(this). addClass("hovered"); e.stopEvent();});
ceLinks.on("mouseout", function(e, t) { Ext.get(this). removeClass("hovered"); e.stopEvent();});