Доступ к нужному элементу 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-19; просмотров: 890;