Overlabel в ExtJS

Каким-то странным образом я вдруг решил перевести один свой проект на ExtJS. И это было не так уж и плохо, я бы даже сказал весьма неплохо, но одна вещь меня немного огорчила.

Я люблю делать так называемые компактные формы [1], [2]. И ExtJS вроде даже поддерживает такую возможность — у стандартных полей ввода есть свойство emptyText, значение которого по умолчанию выводится в самом поле серым цветом. но уже достаточно давно (ещё с версии 1.1, или даже 1.0) нет качественного решения одной мелкой, но весьма неприятной проблемки — если поле оставить пустым, то значение emptyText будет отправлено на сервер. Сначала кажется, что это не так уж и страшно — можно отфильтровать на сервере или клиенте, но достаточно быстро появляются проблемы с фильтрацией — локализация и возможность ручного ввода текста аналогичному значению emptyText весьма портят красивую картину фильтрации.

Ну и с точки зрения логической разметки документа тоже не всё гладко — для задачи именования полей в HTML-документах есть таг label, который имеет аттрибут for, однозначно привязывающий label к элементу формы.

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

Вспомнив свой опыт с библиотекой jQuery я решил открыть первоисточник статьи и реализовать аналогичное решение для ExtJS.

Само по себе решение очень элегантное — используя слои и абсолютное позиционирование, производится смещение элемента label относительно левого края текстового поля (а тот же combobox основан на текстовом поле и вовсе не на элементе select например :) ). Также с помощью CSS мы ставим серый цвет текста label, чем получаем визуальный аналог emptyText. Но к моему просто величайшему сожалению это ещё не всё.

После этого мы вешаем обработчик на событие focus текстового поля, в котором скрываем элемент label (setVisible(false), style=”visible: none” ?), и обработчик на событие blur, в котором проверям наличие текста в поле, и если он отсутствует — показываем label обратно.

Ссылки:

[1]http://www.alistapart.com/articles/makingcompactformsmoreaccessible
[2]http://designformasters.info/posts/compact-accessible-forms/
Добавить пост в: Delicious Reddit Slashdot Digg Technorati Google
(уже: 0) Комментировать статью

Комментарии

К этой публикации комментариев нет

Обязательное поле. Не больше 30 символов.

Обязательное поле