RichSelect

Справочник по API

Обзор

Контрол RichSelect - это не редактируемый Combo-box.

RichSelect содержит текстовое поле ввода и всплывающее окно, которое содержит стандартный список с опциями.

Еще один способ создать компонент со схожей функциональностью, это прикрепить suggest list к текстовому полю, но текстовое поле в этом случае будет редактируемым.

Инициализация

// полная форма
{
    view:"richselect",
    id:"list2", 
    label:"richselect", 
    value:1, 
    yCount:"3", 
    options:[ 
        {id:1, value:"One"}, // изначально выбранный элемент
        {id:2, value:"Two"}, 
        {id:3, value:"Three"}
    ]
}
 
// краткая форма массива опций
{view:"richselect", options:["One", "Two", "Three"]}
 
// опции на сервере
{ view:"richselect", options:"server/data.json"}

Related sample:  Non-editable Combo Box ('richselect')

Основные свойства

  • value (string, number)
    • внутри массива options - определяет текстовое значение для выбираемых элементов;
    • внутри конструктора richselect - определяет изначально выбранный элемент контрола (ID для длинной формы инициализации, текстовое значение для короткой формы инициализации);
  • placeholder (string) - текст плейсхолдера для поля ввода. Контрол должен быть инициализирован без исходного значения;
  • label (string) - задает текст ярлыка. Можно настраивать с помощью:
    • labelAlign (string) - выравнивание ярлыка относительно его контейнера. Возможные значения "left" и "right". Если не задано, помещается слева от контрола;
    • labelWidth (number) - ширина контейнера ярлыка;
  • options (array, object, string) - определяет список опций для контрола. Подробнее.

Настройка Suggest List

Контрол можно изменять и настраивать различными способами, например:

  • опции могут быть определены динамически;
  • опции можно загрузить на бэке;
  • темплейт можно изменять.

Вы также можете изменить конфигурацию по умолчанию для suggest list, подробнее в статье Продвинутые настройки Combo.

Доступ к Suggest List

Richselect API позволяет получать объект выпадающего окна и списка внутри него для дальнейшей обработки. Пример ниже иллюстрирует оба варианта:

$$("richselect1").getPopup(),           // получение suggest  
$$("richselect1").getPopup().getBody(), // получение текущего тела suggest
$$("richselect1").getPopup().getList(), // получение объекта list
$$("richselect1").getList(),            // получение объекта list, быстрый способ

Pro версии Richselect

Для пользователей Webix Pro библиотека позволяет расширить возможности контрола отображением DataView или DataTable во всплывающем окне:

Получить текущее значение

Для полной формы инициализации, метод getValue() вернет ID выбранной опции, но не её текст. Используйте getText(), чтобы получить текстовое значение.

$$("field_t").getValue(); // -> возвращает 1
 
$$("field_t").getText() // -> возвращает "One"

Статьи по теме

Наверх