controls

Описание

Необязательный параметр. Набор конфигураций, определяющих один или несколько пользовательских элементов управления

К сведению

Свойство controls позволяет создавать пользовательские элементы управления Editbar на основе Базовых элементов управления и/или Сложных элементов управления. Используйте свойство properties, чтобы применять пользовательские элементы управления к нужным элементам (фигурам, группам, дорожкам и т. д.).

Подробнее о настройке читайте в гайде Конфигурация Editbar!

important

Не рекомендуется переопределять элементы управления по умолчанию при создании пользовательского элемента управления. Используйте уникальное имя для каждого пользовательского элемента управления!

Использование

controls?: {
    [type: string]: object, // пользовательский элемент управления
};

Параметры

• type - имя типа пользовательского элемента управления
  • object - конфигурационный объект нового элемента управления на основе Базовых элементов управления и/или Сложных элементов управления

controls: {
      estimate: { /*...*/ }, // создание нового элемента управления "estimate" с пользовательскими конфигурациями
      // другой элемент управления
}

Пример

const editor = new dhx.DiagramEditor("editor_container", {
    type: "org",
    view: {
        // editbar: true, // отображает Editbar по умолчанию
        // или настройте Editbar через объект
        editbar: {
            css: "custom_css",
            show: true,
            width: 300,
            properties: {
                $shape: [
                    { type: "estimate" }, // применение пользовательского элемента управления "estimate"
                    { type: "name" } // применение пользовательского элемента управления "name"
                ]
            },
            controls: {
                // создание пользовательского элемента управления "estimate"
                estimate: {
                    type: "fieldset",
                    label: "Time estimate",
                    rows: [
                        { type: "datepicker", key: "date_start", label: "Date start" },
                        { type: "datepicker", key: "date_end", label: "Date end" }
                    ]
                },
                // создание пользовательского элемента управления "name"
                name: { type: "input", label: "Name", key: "name" }
            }
        }
    }
});

Журнал изменений: Свойство добавлено в v6.0

Полезная статья: Конфигурация Editbar

Связанный пример: Diagram Editor. Стандартный режим. PERT-диаграмма с легендой