aHTML[6] = { name: 'IMG', url: 'tags/t_img.htm' };
aHTML[7] = { name: 'META', url: 'tags/t_meta.htm' };
aHTML[8] = { name: 'P', url: 'tags/t_p.htm' };
aHTML[9] = { name: 'STRONG', url: 'tags/t_strong.htm' };
aHTML[10] = { name: 'TITLE', url: 'tags/t_title.htm' };
aHTML[11] = { name: 'VIDEO', url: 'tags/t_video.htm' };
var aCSS = [];
aCSS[0] = { name: 'border', url: 'attrs/a_border.htm' };
aCSS[1] = { name: 'color', url: 'attrs/a_color.htm' };
aCSS[2] = { name: 'margin', url: 'attrs/a_margin.htm' };
var aSamples = [];
aSamples[0] = { name: 'Гиперссылки', url: 'samples/a_hyperlinks.htm' };
aSamples[1] = { name: 'Контейнеры', url: 'samples/a_containers.htm' };
aSamples[2] = { name: 'Таблицы', url: 'samples/a_tables.htm' };
Здесь мы объявили массивы aHTML, aCSS и aSamples, которые будут хранить списки Web-страниц, описывающих, соответственно, теги HTML, атрибуты стиля CSS и примеры.
Элементы каждого из этих массивов хранят конфигураторы с двумя свойствами:
— name — название соответствующего пункта вложенного списка в виде строки;
— url — интернет-адрес файла с фрагментом содержимого также в виде строки.
Сохраним набранный код в кодировке UTF-8. Вообще, не забываем, что после любых правок кода его нужно сохранять.
Затем откроем в Блокноте Web-страницу index.htm и вставим в ее секцию заголовка такой код:
<SCRIPT SRC='data.js'></SCRIPT>
Он загрузит и выполнит только что созданный нами файл Web-сценария data.js. В результате в памяти компьютера будут созданы три массива — наша база данных.
Отметим, что файл Web-сценария загружается и выполняется в самом начале загрузки Web- страницы index.htm. Поэтому, когда дело дойдет до исполнения Web- сценариев, хранящихся в файле main.js (а они выполняются в конце загрузки Web-страницы), наша база данных уже будет сформирована и готова к работе.
Генерирование полосы навигации
Теперь можно заняться кодом, генерирующим вложенные списки в полосе навигации.
Снова откроем Web-страницу index.htm в Блокноте, если уже ее закрыли. Удалим весь HTML-код, формирующий пункты вложенных списков в полосе навигации, но оставим фрагмент, создающий сами вложенные списки. Результат приведен в листинге 18.2.
Листинг 18.2
<UL ID='navbar'>
<LI><A HREF='chapters/html.htm'>HTML</A>
<UL>
</UL>
</LI>
<LI><A HREF='chapters/css.htm'>CSS</A>
<UL>
</UL>
</LI>
<LI><A HREF='chapters/samples.htm'>Примеры</A>
<UL>
</UL>
</LI>
<LI><A HREF='chapters/about.htm'>О разработчиках</A></LI>
</UL>
После этого откроем файл Web-сценария main.js и поместим перед вызовом метода onReady объекта Ext код из листинга 18.3.
Листинг 18.3
function generateInnerList(aDataBase, elInnerList) {
for (var i = 0; i < aDataBase.length; i++) {
var s = '<LI><CODE><A HREF='' + aDataBase[i].url + ''>' + aDataBase[i].name + '</A></CODE></LI>'; elInnerList.insertHtml('beforeEnd', s);
}
}
Он объявляет функцию generateInnerList, которая будет создавать пункты одного вложенного списка. Эта функция принимает два обязательных параметра:
— один из формирующих нашу базу данных массивов; на основе этого массива будут созданы пункты указанного вложенного списка;
— вложенный список, в котором будут создаваться эти пункты, в виде экземпляра объекта Element.
Ее код очень прост. Рассмотрим его построчно.
Запускаем цикл со счетчиком, в теле которого будут создаваться пункты списка:
for (var i = 0; i < aDataBase.length; i++) {
Счетчик цикла — переменная i, начальное значение счетчика — 0, конечное значение — размер массива, переданного первым параметром (он берется из свойства length объекта Array; подробнее — в
Формируем строку с HTML-кодом, создающим пункт списка:
var s = '<LI><CODE><A HREF='' + aDataBase[i].url + ''>' + aDataBase[i].name + '</A></CODE></LI>';
Название пункта и интернет-адрес файла с фрагментом содержимого берем из соответствующих свойств конфигуратора, являющегося элементом переданного первым параметром массива.
Создаем пункт списка на основе строки, сформированной в предыдущем выражении:
elInnerList.insertHtml('beforeEnd', s);
}
В качестве места, куда будет помещен новый пункт, мы указываем 'beforeEnd' — перед закрывающим тегом. В результате новые пункты будут добавляться в конец списка.
На этом выполнение тела цикла завершается. А после того, как цикл закончит работу, завершится выполнение самой функции generateInnerList.
Теперь вставим в самое начало тела функции, передаваемой методу onReady объекта Ext, три выражения:
generateInnerList(aHTML, Ext.get('navbar'). child('> LI: nth(1) UL'));
generateInnerList(aCSS, Ext.get('navbar'). child('> LI: nth(2)UL'));
generateInnerList(aSamples, Ext.get('navbar'). child('> LI: nth(3) UL'));
Мы трижды вызываем функцию generateInnerList, поочередно передавая ей три массива,
