OneToMany

Назначение

Компонент OneToMany предназначен для выбора значений из справочника.

Незаполненный компонент выглядит следующим образом:

При нажатии на кнопку “…” открывается диалоговое окно:

Пример заполнения данными компонента:

Свойства

Наименование	Назначение	Значение по умолчанию
visible	задаёт видимость компоненты	true
disabled	задаёт редактируемость компоненты	false
tooltip	задаёт текст всплывающей подсказки, которая появляется при наведении курсора на элемент
cssClasses	список CSS классов (см. раздел Дизайн)
style	список основных свойств: padding (необходимо указывать единицы измерения) margin (необходимо указывать единицы измерения). См. http://htmlbook.ru/css/margin. Например для задания отступа справа на 50px необходимо задать значение 0px 50px 0px 0px border - задает размер, цвет и стиль рамки. Например “20px solid red”. Подробнее http://htmlbook.ru/css/border height - задает высоту компонента width - задает ширину компонента minHeight - задает минимальную высоту компонента minWidth - задает минимальную ширину компонента maxHeight - задает максимальную высоту компонента maxWidth - задает максимальную ширину компонента.

Пример заполнения:

Необходимо добавить компонент OneToMany на страницу.

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

OneToMany – это составной компонент, состоящий из след. элементов:

Здесь:

Настроим каждый элемент отдельно.

1. Настройка OneToManyField:

Настроить аналогично Autocomplete.

2. Настройка кнопки диалогового окна “…”:

Настроить SelectButton.

3. Настройка диалогового окна:

3.1 Настроить Grid.

3.2 Настройка FilterPanel:

Заполнить FilterFieldSet:

В FilterFieldSet вкладываются компоненты из раздела Компоненты > Фильтры, в зависимости от того по полям какого типа собираетесь фильтровать: по дате - FilterDateTimePicker, по тексту - FilterTextField, по списку значений - FilterComboBox, и т. д.

Заполнить ButtonsContainer:

Контейнер ButtonsContainer содержит в себе кнопки диалогового окна. Описание настройки кнопок можно посмотреть в разделе Компоненты > Кнопки.

3.3 Заполнить ButtonsContainer:

Пример минимальной настройки компонента OneToMany…

Задача: Необходимо организовать выбор организации из списка организаций.

Добавляем OneToMany (если предполагается сохранение в БД – то в компонент Form)

1. Настройка OneToManyField:

Наименование	Действие
graph	задайте граф сущностей: в примере используются 2 таблицы: organization – организация и organization_version – версия организации (хранит нужную нам информацию по организации)
Column For Save	колонка в БД для загрузки и сохранения значения (в списке – таблицы из структуры сущностей Form, в который вложен настраиваемый компонент) – здесь задаем таблицу:колонку куда будем класть выбранную организацию.

2. Настройка диалогового окна:

Настраиваем Grid:

Наименование	Назначение	Результат
graph	Граф сущностей аналогичен графу OneToManyField (см. п.1.):
columns[size]	Отображаемые колонки в Grid. Для примера настроены две колонки:	В результате настроенная таблица в диалоге выбора SelectDialog:

Настройка FilterPanel:

Необходимо настроить фильтрацию в настроенном Grid. Для примера настроим фильтрацию по колонке Full name.

В Full name хранится текст, следовательно необходимо в FilterFieldSet добавить фильтр FilterTextField.

FilterTextField настраивается аналогично TextField (имеет те же общие свойства), а также свойство, характерное свойство для фильтров – FilterControl:

Здесь мы выбрали операцию фильтрации CONTAINS – будут отобраны значения содержание введенные пользователем символы и Column For Filter – таблица:колонка, по которой происходит сортировка – в нашей задаче это поле full_name таблицы organization_version.

Скрипты

component/grid/renderers/Base64ImageCellRenderer.ts - скрипт для отображения изображения. Необходимо выбрать его в свойстве renderer необходимой колонки.