Листинг 19.2

function generateRelated() {

var s = "";

var oRelated = elLastItem.dom.related;

if (oRelated) {

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

if (s!= "")

s += ", ";

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

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

}

var htelRelated = Ext.get("cmain"). insertHtml("beforeEnd", "<P>См. также: " + s + "</P>"); Ext.fly(htelRelated). select("A"). on("click", function(e, t) {

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

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

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

loadFragment(elItem, e);

});

}

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

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

var s = "";

Первое, что нам нужно, — получить список материалов, связанных с загруженной в данный момент Web-страницей (точнее, фрагментом содержимого). Как его получить? Вспомним, что еще в главе 17 мы объявили переменную 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, представляющим возникшее событие, "скармливает" объявленной нами в главе 17 функции loadFragment. Последняя выполнит загрузку соответствующего фрагмента содержимого и выделит соответствующий пункт полосы навигации:

loadFragment(elItem, e);

});

}

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

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

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

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