ComboBox

Диджит ComboBox – это раскрывающийся список значений, очень напоминающий элемент SELECT в языке разметки HTML, только в отличие от последнего ComboBox основан на обычном элементе input, поэтому, если требуемое значение отсутствует в списке предлагаемых вариантов, его можно ввести с клавиатуры. Диджит ComboBox наследует свойства и методы ValidationTextBox, благодаря чему вы получаете полную палитру возможностей выполнения проверки правильности. Из дополнительных возможностей – ComboBox предоставляет возможность фильтровать список вариантов в соответствии с учетом уже введенных символов.

Список вариантов может быть статическим, определенным заранее, или динамическим, который может извлекаться с сервера с помощью механизмов dojo.data. В самом простом случае диджит ComboBox может использоваться для предоставления статического списка значений с возможностью ввода пользователем своего собственного значения. Следующий фрагмент демонстрирует применение статического списка с активированной функцией автодополнения.


Объединение диджита ComboBox с механизмом ItemFileReadStore выполняется очень просто, и для этого придется приложить усилий чуть больше, чем просто указать диджиту источник данных.


Например, пусть у нас имеется источник данных, хранящий информацию о различных видах обжарки кофе с их описаниями, как показано ниже:
{identifier : "name",
items : [
{name : "Light Cinnamon", description : "Very light brown, dry ,
tastes like toasted grain with distinct sour tones, baked, bready"},
{name : "Cinnamon", description : "Light brown and dry, still toasted
grain with distinct sour acidy tones"},
...еще множество видов...
]
}

Предположим, что вам потребовалось заполнить ComboBox значения ми поля name и при выборе того или иного вида обжарки делать чтоли бо с его описанием. Решить эту задачу можно, как показано в примере 13.6.

Пример 13.6. Диджит ComboBox в действии


Pick a coffee roast, any coffee roast
href="http://o.aolcdn.com/dojo/1.1/dojo/resources/dojo.css" />
href="http://o.aolcdn.com/dojo/1.1/dijit/themes/tundra/tundra.css" />
djConfig="parseOnLoad:true",
type="text/javascript"
src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js">


(body class="tundra")
jsId="coffeeStore" url="./coffee.json">


(button dojoType="dijit.form.Button")Submit(/button)

(/body)


В этом фрагменте ComboBox соединяется с ItemFileReadStore через атрибут store, и посредством атрибута serachAttr диджиту ComboBox сообщается, значение какого поля должно отображаться.


После этого, когда происходит изменение, метод onChange диджита ComboBox определяет, какое значение было выбрано, и использует его для поиска соответствующего ему описания в хранилище..



Оцените статью: (0 голосов)
0 5 0

Статьи из раздела Dojo на эту тему:
Button
CheckBox
ComboButton
CurrencyTextBox
DropDownButton

Вернуться в раздел: Dojo / Виджеты форм