Листинг 16.29

Осталось реализовать скрытие списка search_result при щелчке на содержимом Web-страницы.

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

Ext.getBody().on("click",

function(){ Ext.get("search_result").setDisplayed(false); });

Оно привязывает к событию click секции тела Web-страницы обработчик, который скрывает список search_result.

Ранее мы узнали, что некоторые события, в том числе и click, имеют обыкновение всплывать из элементов, в которых они изначально возникли, в их родители, затем — в родители их родителей и, наконец, в секцию тела Web-страницы. Обработчик события click, который мы только что привязали к секции тела Web-страницы, сработает независимо от того, в каком элементе Web-страницы возникло это событие, и список search_result в любом случае будет скрыт.

Но возникает очень неприятный момент: событие click кнопки запуска поиска также рано или поздно всплывет в секцию тела Web-страницы. Посмотрим, что получится в результате. Посетитель нажмет кнопку запуска поиска, функция searchData сформирует пункты списка результатов и откроет этот список, после чего выполнится обработчик события click, привязанный нами к секции тела Web-страницы, который скроет список результатов, что необходимо исправить.

Найдите в теле функции, передаваемой параметром методу onReady объекта Ext, выражение:

Ext.get("find").on("click", searchData);

Оно привязывает обработчик к событию click кнопки, запускающей поиск. Измените его следующим образом:

Ext.get("find").on("click", function(e){

searchData();

e.stopPropagation();

});

Новый обработчик события click сначала вызовет функцию searchData, собственно выполняющую поиск, а потом подавит всплытие возникшего события. Как видим, для этого используется метод stopPropagation объекта Ext Core EventObject.

В обработчике события click пунктов полосы навигации (функция loadFragment) у нас подавляется всплытие этого события. Следовательно, если посетитель щелкнет на пункте полосы навигации (или гиперссылке раздела "См. также", или гиперссылке пункта в списке результатов поиска), событие click не всплывет в секцию тела Web-страницы, привязанный к нему обработчик не выполнится, и список search_result скрыт не будет. Нам нужно это исправить.

Найдите код, объявляющий функцию loadFragment, и добавьте в самый его конец такое выражение:

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

Что оно делает, мы уже знаем.

Сохраните все исправленные файлы и проверьте поиск в действии.