Доступ к нужному элементу 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 нам пригодятся.
Дата добавления: 2015-05-08; просмотров: 740;