Свойство 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. Спасибо разработчикам Ext Core!
Еще один пример приведен в листинге 20.15.
Листинг 20.15
<FORM ACTION='#'>
<P>
<INPUT TYPE='radio' ID='updates_yes' NAME='updates' CHECKED>
Я хочу получать письма со списком обновлений Web-сайта
</P>
<P>
<INPUT TYPE='radio' ID='updates_no' NAME='updates'>
Я не хочу получать письма со списком обновлений Web-сайта
</P>
<P>Почтовый адрес: <INPUT TYPE='text' ID='email' NAME='email'></P>
</FORM>
.
Ext.get('updates_yes'). on('click', function() { var htelEmail = Ext.getDom('email'); htelEmail.disabled = this.checked;
});
В листинге 20.15 мы выполняем аналогичные действия, но уже с группой из двух переключателей updates2. Обратим внимание, что мы проверяем состояние только первого переключателя этой группы — updates_yes. В группе может быть включен только один переключатель, и если посетитель включит второй переключатель этой группы, первый переключатель отключится. Фактически группа из двух переключателей ведет себя как флажок.
Свойство selectedIndex задает или возвращает номер выбранного в списке пункта в виде числа. При этом:
— если список позволяет выбирать одновременно только один пункт, возвращается номер именно этого пункта;
— если список позволяет выбирать сразу несколько пунктов, возвращается номер первого выбранного пункта;
— если ни один пункт в списке не выбран, возвращается значение –1.
Понятно, что пользы от свойства selectedIndex будет больше в том случае, если список позволяет выбирать только один пункт одновременно. Хотя в любом случае его можно применять для проверки, выбран ли в списке хоть один пункт. Листинг 20.16 иллюстрирует пример.
Листинг 20.16
<FORM ACTION='#'>
<P>
Выполнять поиск по
<SELECT ID='search_in' NAME='search_in'>
<OPTION>названиям</OPTION>
<OPTION>ключевым словам</OPTION>
<OPTION SELECTED>названиям и ключевым словам</OPTION>
</SELECT>
</P>
</FORM>
.
var iIndex = Ext.getDom('search_in'). selectedIndex;
if (iIndex == -1) {
//если в списке не выбран ни один пункт, делаем одно
} else {
//если в списке выбран какой-либо пункт, делаем другое
}
Свойство 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
<FORM ACTION='#'>
<P>
С помощью каких тегов HTML формируется таблица?
<SELECT ID='answer' NAME='answer' SIZE='5' MULTIPLE>
<OPTION>TR</OPTION>
<OPTION>DIV</OPTION>
<OPTION>TABLE</OPTION>
<OPTION>TH</OPTION>
