HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
Далее найдем тело функции, передаваемой методу onReady объекта Ext. В самом его начале поместим два выражения:
Ext.get("search_result"). setDisplayed(false);
cSearchHeight = Ext.get("csearch"). getHeight;
Первое выражение сразу скроет список search_result, а второе присвоит изначальную высоту контейнера csearch объявленной ранее служебной переменной.
Функцию adjustContainers, задающую размеры контейнеров, мы объявили еще в главе 16 и с тех пор ни разу к ней не возвращались. Настала пора внести в объявление этой функции некоторые правки.
Вот выражения, которые мы
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="#"]");
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="#"]");
var elItem = elA.parent("LI");
loadFragment(elItem, e);
});
Фрагмент
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"); elH6.removeAllListeners;
});
}
Так, б'oльшую часть работы мы сделали. Осталось реализовать скрытие списка search_result при щелчке на содержимом Web-страницы.
Вернемся к телу функции, передаваемой параметром методу onReady объекта Ext, и добавим в его конец такое выражение:
Ext.getBody. on("click",
function{ Ext.get("search_result"). setDisplayed(false); });
Оно привязывает к событию click секции тела Web-страницы обработчик, который скрывает список search_result.
В главе 15 мы узнали, что некоторые события, в том числе и click, имеют обыкновение всплывать из элементов, в которых они изначально возникли, в их родители, затем — в родители их родителей и, наконец, в секцию тела Web-страницы. Обработчик события click, который мы только что привязали к секции тела Web- страницы, сработает независимо от того, в каком элементе Web-страницы возникло это событие, и список search_result в любом случае будет скрыт.
Но тут возникает очень неприятный момент: событие click кнопки запуска поиска также рано или поздно всплывет в секцию тела Web-страницы. Давайте посмотрим, что получится в результате. Посетитель нажмет кнопку запуска поиска, функция searchData сформирует пункты списка результатов и откроет этот список, после чего выполнится обработчик события click, привязанный нами к секции тела Web- страницы, который скроет список результатов. Непорядок!
Найдем в теле функции, передаваемой параметром методу onReady объекта Ext, вот это выражение: