Листинг 15.8

Рассмотрим приведенный код построчно.

Объявляем переменную s, в которой будет храниться HTML-код, формирующий раздел "См. также" в виде строки:

var s = "";

Первое, что нам нужно, — получить список материалов, связанных с загруженной в данный момент Web-страницей (точнее, фрагментом содержимого). В первом задании мы объявили переменную elLastItem. Она хранит пункт полосы навигации, на котором посетитель щелкнул мышью и который как раз и соответствует загруженному в данный момент фрагменту содержимого.

Вот и решение:

var oRelated = elLastItem.dom.related;

Значение переменной elLastItem — это экземпляр объекта Element. Соответствующий ему экземпляр объекта HTMLElement мы можем получить через свойство dom.

Полученный экземпляр объекта HTMLElement, в свою очередь, содержит свойство related, которое и хранит массив конфигураторов, представляющих Web-страницы со связанными материалами; мы сами создали это свойство при формировании пунктов вложенных списков (исправленная функция generateInnerList).

Проверяем, присутствует ли это свойство в экземпляре объекта HTMLElement, т. е. существует ли у данной Web-страницы список связанных материалов:

if (oRelated) {

Если существует, запускаем цикл со счетчиком, который обработает все элементы этого массива:

for (var i = 0; i < oRelated.length; i++) {

Фрагменты HTML-кода, формирующие отдельные гиперссылки раздела "См. также", мы будем добавлять в строку, хранящуюся в переменной s:

if (s!= "")

s += ", ";

Эти гиперссылки следует разделить запятыми, что и выполняет приведенное выражение. Оно проверяет, есть ли в переменной s непустая строка, т. е. сформирована ли в ней хотя бы одна гиперссылка, и, если это так, добавляет к ней запятую — разделитель гиперссылок.

Формируем HTML-код, создающий гиперссылку на очередную Web-страницу из списка связанных материалов, и добавляем его к значению переменной s:

s += "<CODE><A HREF=\"" + oRelated[i].url + "\">" +

oRelated[i].name + "</A></CODE>";

}

На этом тело цикла завершается.

Далее создаем на основе сформированного HTML-кода абзац, который и станет разделом "См. также". Добавляем его в самый конец контейнера cmain (перед его закрывающим тегом):

var htelRelated = Ext.get("cmain").insertHtml("beforeEnd",

"<P>См. также: " + s + "</P>");

Выбираем из сформированного в предыдущем выражении абзаца все гиперссылки и привязываем к ним функцию — обработчик события click, которую там же и объявляем:

Ext.fly(htelRelated).select("A").on("click", function(e, t) {

Первым делом эта функция получит значение атрибута HREF — интернет-адрес — гиперссылки, на которой щелкнули мышью:

var href = Ext.fly(this).getAttribute("href");

Далее она ищет в списке navbar гиперссылку с тем же интернет-адресом:

var elA = Ext.get("navbar").child("A[href=" + href + "]");

Пункты нашей полосы навигации не содержат повторяющихся интернет-адресов, поэтому такой прием будет работать.

Найдя такую гиперссылку, она получает ее родителя — сам пункт:

var elItem = elA.parent("LI");

который, вместе с экземпляром объекта EventObject, представляющим возникшее событие, "скармливает" объявленной нами в первом задании функции loadFragment. Последняя выполнит загрузку соответствующего фрагмента содержимого и выделит соответствующий пункт полосы навигации:

loadFragment(elItem, e);

});

}

На этом выполнение функции generateRelated заканчивается.

Найдите код, объявляющий функцию cleanupSamples. Она, как мы помним, удаляет обработчики событий у текста примеров перед загрузкой другого фрагмента содержимого. Это нужно, чтобы не засорять внутренние структуры данных библиотеки Ext Core сведениями о привязке обработчиков событий к уже не существующим элементам Web-страницы.

Дополните этот код, чтобы он также удалял обработчики событий у гиперссылок раздела "См. также". Для этого будем выбирать все гиперссылки в контейнере cmain и удалять у них обработчики событий.

Листинг 15.9 содержит дополненное объявление функции cleanupSamples.