HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

var cSearchHeight = 0;

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

Далее найдем тело функции, передаваемой методу onReady объекта Ext. В самом его начале поместим два выражения:

Ext.get('search_result'). setDisplayed(false);

cSearchHeight = Ext.get('csearch'). getHeight();

Первое выражение сразу скроет список search_result, а второе присвоит изначальную высоту контейнера csearch объявленной ранее служебной переменной.

Функцию adjustContainers, задающую размеры контейнеров, мы объявили еще в главе 16 и с тех пор ни разу к ней не возвращались. Настала пора внести в объявление этой функции некоторые правки.

Вот выражения, которые мы добавим в самый конец adjustContainers:

var elCSearch = Ext.get('csearch'); elCSearch.setLocation(clientWidth — elCSearch.getWidth(), Ext.get ('cmain'). getY() — cSearchHeight);

Они позиционируют контейнер csearch так, чтобы он в любом случае находился над верхним левым углом контейнера cmain. Кстати, здесь используется значение изначальной высоты контейнера csearch, которое мы сохранили ранее.

Теперь найдем объявление функции searchData, написанной нами в главе 20. Переделаем его так, как показано в листинге 21.6.

Листинг 21.6

function searchData() {

var elSearchResult = Ext.get('search_result'); elSearchResult.select('A'). removeAllListeners(); elSearchResult.dom.innerHTML = ''; elSearchResult.setDisplayed(false);

var sKeyword = Ext.get('keyword'). getValue(false);

if (sKeyword!= '') {

var iSearchMode = Ext.getDom('search_in'). selectedIndex;

var aResult = [];

searchInArray(sKeyword, aHTML, aResult, iSearchMode); searchInArray(sKeyword, aCSS, aResult, iSearchMode); searchInArray(sKeyword, aSamples, aResult, iSearchMode); if (aResult.length > 0) {

var s = '';

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

s += '<LI><A HREF='' + aResult[i].url + ''>' +

aResult[i].name + '</A></LI>';

}

var htelResult = elSearchResult.insertHtml('beforeEnd', s); Ext.fly(htelResult). 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);

});

elSearchResult.setDisplayed(true);

}

}

Рассмотрим листинг 21.6 построчно.

Перед поиском нам нужно удалить все пункты, уже присутствующие в списке search_result. Для этого мы сначала удаляем все обработчики событий, привязанные к гиперссылкам, находящимся в пунктах этого списка, а потом удаляем сами пункты:

var elSearchResult = Ext.get('search_result'); elSearchResult.select('A'). removeAllListeners(); elSearchResult.dom.innerHTML = ''; elSearchResult.setDisplayed(false);

Напоследок скрываем список search_result.

Обратим внимание, как выполняется удаление пунктов списка search_result. Из главы 15 мы знаем, что объект Web-обозревателя HTMLElement поддерживает свойство innerHTML, хранящее HTML-код, создающий содержимое данного элемента Web-страницы, в виде строки. Значит, чтобы удалить все содержимое данного элемента, мы можем получить соответствующий ему экземпляр объекта HTMLElement (через свойство dom объекта Ext Core Element) и присвоить его свойству innerHTML пустую строку. Что мы и делаем.

Листинг 21.7

var sKeyword = Ext.get('keyword'). getValue(false);

if (sKeyword!= '') {

var iSearchMode = Ext.getDom('search_in'). selectedIndex;

var aResult = [];

searchInArray(sKeyword, aHTML, aResult, iSearchMode); searchInArray(sKeyword, aCSS, aResult, iSearchMode); searchInArray(sKeyword, aSamples, aResult, iSearchMode); if (aResult.length > 0) {

var s = '';

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

s += '<LI><A HREF='' + aResult[i].url + ''>' +

aResult[i].name + '</A></LI>';

}

var htelResult = elSearchResult.insertHtml('beforeEnd', s); Ext.fly(htelResult). 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);

});

Фрагмент кода, приведенный в листинге 21.7, перекочевал из предыдущей реализации функции searchData практически без изменений. Мы уже знаем, что он делает. Сформировав пункты списка search_result, открываем его:

elSearchResult.setDisplayed(true);

}

}

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

Функция cleanupSamples, которую мы объявили в главе 16, удаляет обработчики событий, привязанные к гиперссылкам раздела 'См. также' и результатам поиска. Найдем объявляющий ее код и удалим выражения, которые убирают обработчики событий у гиперссылок результатов поиска, — ведь ранее мы поместили выполняющий это действие код в функцию searchData. После этого объявление функции cleanupSamples будет выглядеть так, как в листинге 21.8.

Листинг 21.8

function cleanupSamples() {

var ceSamples = Ext.select('.sample'); ceSamples.each(function(el, cl, ind){ var elH6 = el.child(':first');