Код 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-обозревателе, после чего больше их не трогаем. В результате кэш быстро
