25. Средства библиотеки Ext Core для управления свободно позиционируемыми элементами

Настала пора рассмотреть методы объекта Element библиотеки Ext Core, с помощью

которых мы можем управлять свободно позиционируемыми элементами Web-страницы. Их немного.

Метод position задает способ позиционирования, z-индекс и координаты данного

элемента:

<экземпляр объекта Element>.position(<способ позиционирования>

[, <z-индекс>[, <горизонтальная координата>

[, <вертикальная координата>]]])

Первым — обязательным — параметром передается соответствующее значение

атрибута стиля position в виде строки: "absolute", "relative" или "fixed". Осталь-ные — необязательные — параметры определяют, соответственно, z-индекс, гори-зонтальную и вертикальную координаты в пикселах; все эти значения задаются

в виде чисел.

Пример:

var elSearch = Ext.get("search");

elSearch.position("absolute", 2);

Методы setX и setY задают, соответственно, горизонтальную и вертикальную коор-динаты данного элемента относительно верхнего левого угла Web-страницы:

<экземпляр объекта Element>.setX|setY(<значение координаты>)

Значение координат указывают в пикселах в виде числа:

elSearch.setX(400);

elSearch.setY(200);

Метод setLocation задает сразу обе координаты данного элемента также относи-тельно верхнего левого угла Web-страницы:

<экземпляр объекта Element>.setLocation(<горизонтальная координата>,

<вертикальная координата>)

Оба значения координат задают в виде чисел в пикселах:

elSearch.setLocation(400, 200);

Метод clearPositioning делает данный элемент непозиционируемым и удаляет за-данные для него координаты. Этот метод не принимает параметров и не возвращает

результата:

elSearch.clearPositioning();

26. Реализация усовершенствованного поиска

Что ж, все, что нам нужно знать о свободно позиционируемых элементах, мы рас-смотрели. Настала пора практических занятий.

В главе 20 мы реализовали на нашем Web-сайте систему поиска. Получилось, мягко

говоря, не очень профессионально, о чем уже говорилось в начале этой главы. Да-вайте улучшим ситуацию.

Прежде всего, мы создадим новый контейнер, дадим ему имя csearch и поместим в

него Web-форму поиска. В этот же контейнер, ниже Web-формы, мы вставим спи-сок, в котором будут выводиться результаты поиска. (Результаты мы будем форми-ровать в виде пунктов списка, содержащих гиперссылки на найденные Web-страницы, — как и в главе 16.) Дадим этому списку имя search_result и сделаем

его изначально скрытым.

Когда посетитель выполнит поиск, мы проверим, присутствуют ли в списке

search_result какие-либо пункты (т. е. выполнялся ли поиск ранее и был ли он

удачным), и, если присутствуют, удалим их и скроем этот список. Если поиск увен-чался успехом, мы сформируем в списке search_result пункты, содержащие гипер-ссылки на найденные Web-страницы, и откроем его. Таким образом, список

search_result будет присутствовать на экране только в случае успешного поиска.

Когда посетитель щелкнет на любом месте Web-страницы (неважно — на гипер-ссылке, в том числе и гиперссылке в списке результатов поиска, на абзаце, на изо-бражении или вообще на пустом месте), мы должны скрыть список search_result.

Это нужно для того, чтобы этот список не присутствовал на экране постоянно и не

мешал посетителю.

В остальном новый поиск будет работать так же, как и старый.