Пример:
Ext.fly(window). on(function()
{
// Что-то делаем
}
);
Здесь показано, как рекомендуется привязывать обработчик к событию resize окна Web- обозревателя (это справедливо и для других событий окна).
Объект HTMLElement, как мы уже знаем, представляет элемент Web-страницы. Рассмотрим некоторые его свойства.
Свойство textContent хранит текстовое содержимое элемента Web-страницы в виде строки. Если элемент не имеет текстового содержимого, оно хранит значение null.
Пример:
var htelCHeader = Ext.getDom('cheader');
var s = htelCHeader.textContent; htelCHeader.textContent = '!' + s +'!';
Здесь мы получаем текстовое содержимое контейнера cheader, добавляем к нему слева и справа восклицательные знаки и снова помещаем его в контейнер cheader.
Свойство innerHTML хранит HTML-код содержимого данного элемента Web-страницы в виде строки.
Пример:
var htelCHeader = Ext.getDom('cheader');
var s = htelCHeader.textContent; htelCHeader.innerHTML = '<EM>' + s + '</EM>';
Объектам Web-обозревателя впору посвящать отдельную книгу — настолько это объемная тема. Мы рассмотрели только несколько инструментов, которые предоставляют они и которые не найти в библиотеке Ext Core. Впоследствии мы еще вернемся к объектам Web-обозревателя, но это будет нескоро.
Что дальше?
Эта глава почти полностью была посвящена библиотеке Ext Core — инструменту, значительно упрощающему работу Web-программиста. Мы рассмотрели несколько объектов этой библиотеки и такое количество их методов, что просто голова кругом.
В следующей главе мы применим полученные знания на практике. О, это будет интересно и поучительно!
ГЛАВА 16. Создание интерактивных Web-страниц
В предыдущей главе мы изучили библиотеку Ext Core. От обилия объектов, свойств, методов и событий голова идет кругом… Как же применить все это богатство на практике?
Этому будет целиком посвящена данная глава. Мы научимся создавать Web- страницы, реагирующие (причем с пользой для дела) на действия посетителя, —
Давайте сначала составим список того, чему хотим 'научить' наши Web-страницы.
— Изменять размеры блочных контейнеров, формирующих дизайн Web-страниц, чтобы они занимали всю клиентскую область окна Web-обозревателя.
— Менять цвет рамки у пунктов полосы навигации при наведении на них курсора мыши. (Собственно, мы уже это сделали в
— Выполнять переход на Web-страницу при щелчке на любом месте соответствующего пункта полосы навигации, не обязательно точно на гиперссылке.
— Скрывать и открывать вложенные списки, формирующие полосу навигации, при щелчке на пункте 'внешнего' списка, в который они вложены.
— Выделять пункт полосы навигации, соответствующий открытой в данный момент Web- странице.
— Реализовать скрытие и открытие текста примеров на Web-страницах, посвященных отдельным тегам и атрибутам стиля, при щелчке мышью на заголовке 'Пример: '.
Довольно много, не так ли? Но библиотека Ext Core поможет нам сделать все с минимальным объемом кода.
Управление размерами блочных контейнеров
И первое, что мы сделаем, — заставим блочные контейнеры на наших Web-страницах изменять свои размеры так, чтобы занимать всю клиентскую область окна Web-обозревателя и при этом не выходить за ее пределы.
Сначала откроем таблицу стилей main.css и найдем в ней стиль переопределения тега <BODY>. Изменим его так, как показано в листинге 16.1.
Листинг 16.1
BODY { color: #3B4043; background-color: #F8F8F8; font-family: Verdana, Arial, sans-serif; margin: 0px; overflow: hidden }
Мы добавили в этот стиль атрибут overflow со значением hidden, тем самым убрав у всей Web- страницы полосы прокрутки. Они нам не нужны, более того, появляясь в самый неподходящий момент, они могут нарушить местоположение блочных контейнеров.
Сохраним таблицу стилей. И сразу же откроем файл Web-сценариев main.js. В самом его начале, еще до вызова метода onReady объекта Ext, вставим код листинга 16.2.
Листинг 16.2
function adjustContainers() {
var clientWidth = Ext.lib.Dom.getViewportWidth();
var clientHeight = Ext.lib.Dom.getViewportHeight();
var cNavbarWidth = Ext.get('cnavbar'). getWidth();
var cHeaderHeight = Ext.get('cheader'). getHeight();
var cCopyrightHeight = Ext.get('ccopyright'). getHeight();
Ext.get('cheader'). setWidth(clientWidth);
var cNavbarHeight = clientHeight — cHeaderHeight — cCopyrightHeight -30; Ext.get('cnavbar'). setHeight (cNavbarHeight); Ext.get('cmain'). setHeight(cNavbarHeight); Ext.get('cmain'). setWidth(clientWidth — cNavbarWidth—10); Ext.get('ccopyright'). setWidth(clientWidth);
}
В конце тела функции, которую мы передаем в качестве параметра методу onReady
объекта Ext, вставим два выражения:
Ext.fly(window). on('resize', adjustContainers);
adjustContainers();
Сохраним файл main.js. Откроем Web-страницу index.htm в Web-обозревателе — и сразу отметим, что блочные контейнеры приняли такие размеры, чтобы занять всю клиентскую область окна Web-
