Листинг 16.9

function showHideSample(e, t) {

var elDiv = Ext.fly(t). parent(".sample");

var ceSampleText = elDiv.select("*:not(:first-child)"); ceSampleText.setVisibilityMode(Ext.Element.DISPLAY); ceSampleText.toggle();

}

function prepareSamples() {

var ceSamples = Ext.select(".sample");

ceSamples.each(function(el, cl, ind){ var elH6 = el.child(":first"); elH6.on("click", showHideSample); elH6.on("mouseover", function(e, t) {

Ext.get(this). parent("DIV"). addClass("hovered");

});

elH6.on("mouseout", function(e, t) { Ext.get(this). parent("DIV"). removeClass("hovered");

});

var ceSampleText = el.select("*:not(:first-child)");

ceSampleText.setDisplayed(false);

});

}

Мы объявили функции showHideSample и prepareSamples. Первая будет обрабатывать событие click в первом потомке контейнера с текстом примера и в ответ на это событие скрывать или открывать данный контейнер. Вторая будет выполнять подготовительные действия: при открытии Web-страницы скрывать контейнеры с текстом примеров и привязывать к ним обработчики событий.

Рассмотрим код этих функций построчно. И начнем с функции prepareSamples.

Сначала получаем все контейнеры с привязанным стилевым классом sample, т. е. содержащие текст примеров:

var ceSamples = Ext.select(".sample");

Затем для каждого полученного контейнера выполняем описанные далее манипуляции:

ceSamples.each(function(el, cl, ind){

Получаем первый потомок контейнера:

var elH6 = el.child(":first");

Привязываем к нему в качестве обработчика события click функцию

showHideSample:

elH6.on("click", showHideSample);

Привязываем к нему функцию — обработчик события mouseover, которую там же и объявляем:

elH6.on("mouseover", function(e, t) { Ext.fly(this). parent("DIV"). addClass("hovered");

});

Эта функция получит родитель элемента Web-страницы, в котором возникло данное событие, т. е. контейнер с текстом примера, и привяжет к нему стилевой класс hovered.

Не забываем привязать функцию-обработчик события mouseout, которая будет убирать из привязки к контейнеру стилевой класс hovered:

elH6.on("mouseout", function(e, t) { Ext.fly(this). parent("DIV"). removeClass("hovered");

});

Получаем все остальные элементы-потомки контейнера (не являющиеся первым потомком):

var ceSampleText = el.select("*:not(:first-child)");

И скрываем их:

ceSampleText.setDisplayed(false);

});

На очереди — функция showHideSample.

Получаем родитель элемента Web-страницы, в котором возникло событие:

var elDiv = Ext.fly(t). parent(".sample");

Поскольку этот обработчик привязан к первому потомку контейнера с текстом примера, здесь мы получим сам этот контейнер.

Получаем все элементы-потомки контейнера, не являющиеся первым потомком:

var ceSampleText = elDiv.select("*:not(:first-child)");

Указываем, что для управления их видимостью будет использован атрибут стиля display, и изменяем их видимость (открываем, если они скрыты, и скрываем, если они открыты):

ceSampleText.setVisibilityMode(Ext.Element.DISPLAY);

ceSampleText.toggle();

Использовать здесь метод toggle проще, чем setDisplayed — нам не придется проверять, открыты данные элементы Web-страницы или нет. Правда, перед этим потребуется указать, что видимостью элемента будет управлять атрибут стиля display, но это мелочи.

Еще нам нужно поставить вызов функции prepareSamples в самый конец функции, передаваемой методу onReady объекта Ext:

prepareSamples();

Теперь откроем любую Web-страницу, содержащую описание тега HTML или атрибута стиля CSS, и поместим текст примера в блочный контейнер с привязанным стилевым классом sample. Листинг 16.10 иллюстрирует HTML-код Web-страницы t_audio.htm.