Работа с элементами управления

Толку от Web-формы немного, если вводимые в ней данные никак не обрабатываются. Поскольку мы занимаемся исключительно клиентскими интернет-технологиями, обрабатывать данные мы будем в Web-сценариях.

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

Свойства и методы объекта HTMLElement, применяемые для работы с элементами управления

Сначала рассмотрим самые полезные для нас свойства и методы объектов Web-обозревателя, представляющих различные элементы управления. Запомним: это именно объекты Web-обозревателя, производные от объекта HTMLElement.

Свойство disabled позволяет сделать элемент управления доступным или недоступным для посетителя. Значение true этого свойства делает элемент управления доступным, значение false – недоступным. Листинг 20.14 иллюстрирует пример.

Работа с элементами управления

Здесь мы с помощью метода getDom получаем экземпляр объекта HTMLElement, представляющий поле ввода почтового адреса email, и делаем его недоступным для ввода, присвоив свойству disabled значение false.

Свойство readOnly позволяет сделать элемент управления доступным или недоступным для ввода. Значение true этого свойства делает элемент управления недоступным для ввода, значение false – доступным:

Ext.getDom("email").readOnly = false;

Свойство value задает или возвращает значение, введенное в поле ввода или область редактирования, в виде строки:

var sEmail = Ext.getDom("email").value;

Свойство checked позволяет получить или задать состояние флажка или переключателя – установлен он или нет. Значение true обозначает, что флажок или переключатель установлен, значение false – сброшен:

Ext.get("updates").on("click", function() {

var htelEmail = Ext.getDom("email");

htelEmail.disabled = this.checked;

});

Здесь мы привязываем к флажку updates функцию – обработчик события click, которую тут же и объявляем. Эта функция делает доступным для посетителя поле ввода email, если флажок установлен, и недоступным – если он сброшен. Наша задача упрощается тем, что переменная this, доступная в теле функции-обработчика события и хранящая элемент Web-страницы, в котором обрабатывается событие, хранит этот элемент в виде экземпляра объекта HTMLElement.

Еще один пример приведен в листинге 20.15.

Работа с элементами управления

В листинге 20.15 мы выполняем аналогичные действия, но уже с группой из двух переключателей updates2. Обратим внимание, что мы проверяем состояние только первого переключателя этой группы – updates_yes. В группе может быть включен только один переключатель, и если посетитель включит второй переключатель этой группы, первый переключатель отключится. Фактически группа из двух переключателей ведет себя как флажок.

Свойство selectedIndex задает или возвращает номер выбранного в списке пункта в виде числа. При этом:

• если список позволяет выбирать одновременно только один пункт, возвращается номер именно этого пункта;

• если список позволяет выбирать сразу несколько пунктов, возвращается номер первого выбранного пункта;

• если ни один пункт в списке не выбран, возвращается значение –1.

Понятно, что пользы от свойства selectedIndex будет больше в том случае, если список позволяет выбирать только один пункт одновременно. Хотя в любом случае его можно применять для проверки, выбран ли в списке хоть один пункт. Листинг 20.16 иллюстрирует пример.

Работа с элементами управления

Свойство options возвращает коллекцию пунктов списка. Эта коллекция является экземпляром объекта HTMLOptionsCollection:

var clItems = Ext.getDom("search_in").options;

Свойство length объекта HTMLOptionsCollection возвращает число элементов в коллекции, т. е. количество пунктов в списке:

var iItemsCount = clItems.length;

Для доступа к отдельным пунктам в этой коллекции мы можем использовать числовые индексы, как и в случае массива:

var htelSecondItem = clItems[1];

Здесь мы получаем второй пункт списка.

Отдельный пункт списка представляется экземпляром объекта HTMLOptionElement. Он поддерживает уже знакомое нам свойство disabled, позволяющее разрешить или запретить доступ к данному пункту списка.

А еще он поддерживает свойство selected, указывающее, выбран ли данный пункт списка. Значение true обозначает, что пункт списка выбран, а значение false – не выбран. Это свойство удобно применять, чтобы выяснить, какие пункты выбраны в списке, позволяющем выбирать сразу несколько пунктов (листинг 20.17).

Работа с элементами управления

В листинге 20.17 мы создали что-то наподобие онлайнового экзамена. Посетителю требуется выбрать в списке answer пункты, представляющие теги HTML, с помощью которых создаются таблицы. Если все эти пункты выбраны, ответ считается правильным.

Свойство form возвращает экземпляр объекта HTMLElement, представляющий Web-форму, в которой находится данный элемент управления:

var htelForm = Ext.getDom("answer").form;

Метод focus делает данный элемент управления активным. Он не принимает параметров и не возвращает результата:

Ext.getDom("email").focus();

Метод blur делает данный элемент управления, наоборот, неактивным; при этом фокус ввода переносится на следующий в порядке обхода элемент управления. Данный метод также не принимает параметров и не возвращает результата:

Ext.getDom("email").blur();

Метод select выделяет все содержимое поля ввода или области редактирования. Он не принимает параметров и не возвращает результата:

Ext.getDom("email").select();

Метод click позволяет имитировать щелчок на кнопке. Он не принимает параметров и не возвращает результата (листинг 20.18).

Работа с элементами управления

Свойства и методы объекта Element, применяемые для работы с элементами управления

А теперь обратимся к объекту Element библиотеки Ext Core и посмотрим, что он может предложить нам для работы с элементами управления.

Метод getValue возвращает значение, введенное в поле ввода или область редактирования, в виде строки или числа:

<экземпляр объекта Element>.getValue(<преобразовать в число>)

Если этому методу передать в качестве параметра значение false, он вернет значение поля ввода или области редактирования в виде строки. Если же ему передать значение true, он попытается преобразовать это значение в число и в случае успеха вернет его; в противном случае он вернет это значение в виде строки:

var sEmail = Ext.get("email").getValue(false);

Метод focus делает данный элемент управления активным. Он не принимает параметров и не возвращает результата. Если вызвать этот метод у элемента Web-страницы, не являющимся элементом управления, ничего не произойдет:

Ext.get("email").focus();

Метод blur делает данный элемент управления неактивным; при этом фокус ввода переносится на следующий в порядке обхода элемент управления:

Ext.get("email").blur();

Данный метод также не принимает параметров и не возвращает результата. Если вызвать его у элемента Web-страницы, не являющимся элементом управления, ничего не произойдет.

Метод select поддерживает еще один селектор – :checked. Он соответствует всем установленным флажкам и переключателям:

var clChecked = Ext.get("cmain").select(":checked");

События элементов управления

Специфические события, поддерживаемые элементами управления, перечислены в табл. 20.1. Их немного.

События элементов управления

Элементы управления также поддерживают события dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover и mouseup, описанные в табл. 15.1.