Работа с элементами Lightbox

Получение и установка значения элемента управления

Вы можете получить или обновить значение элемента управления lightbox, используя метод gantt.getLightboxSection. Вот как это сделать:

// Получить значение
var value = gantt.getLightboxSection('description').getValue();
 
// Установить значение
gantt.getLightboxSection('description').setValue('abc');

Проверка, открыт ли Lightbox

Чтобы определить, открыт ли в данный момент lightbox, вы можете проверить свойство lightbox в объекте состояния, возвращаемом методом gantt.getState. Если lightbox открыт, он вернет ID открытой задачи; в противном случае вернет null или undefined.

if (gantt.getState().lightbox){
    // Код, когда lightbox открыт
} else {
    // Код, когда lightbox закрыт
}

Связывание свойств данных с секциями Lightbox

Чтобы связать свойство данных с конкретной секцией lightbox, используйте атрибут map_to в объекте секции:

// Назначает секцию "holders" свойству данных "holder"
gantt.config.lightbox.sections = [
    {name:"description", height:38, type:"textarea", map_to:"text", focus:true},
    {name:"holders", height:22, type:"textarea", map_to:"holder"},
    {name:"time", height:72, type:"duration", map_to:"auto"}
];

Установка значений по умолчанию для элементов управления Lightbox

Вы можете установить значения по умолчанию для секций lightbox, используя свойство default_value в объекте секции. Например, если вы добавили пользовательскую секцию "Приоритет" в lightbox для отображения приоритета задачи, вы можете установить "Низкий" в качестве значения по умолчанию следующим образом:

var opts = [
    { key:1, label: "High" },                                            
    { key:2, label: "Normal" },                                         
    { key:3, label: "Low" }                                            
];
 
gantt.config.lightbox.sections = [
    {name:"description", height:38, type:"textarea", map_to:"text", focus:true},
    {name:"priority", height:22, type:"select", map_to:"priority", options:opts, default_value:3}, 
    {name:"time", height:72, type:"duration", map_to:"auto"}
];

Если вы хотите установить значение по умолчанию непосредственно для новых событий, вы можете использовать событие onTaskCreated:

gantt.attachEvent("onTaskCreated", function(id, task){
    task.priority = "Low";
    return true;
});

Скрытие секции для определенных событий

Чтобы скрыть секцию для определенных событий, вы можете переопределить ее метод set_value. Вот пример:

gantt.form_blocks.textarea.set_value = function(node, value, ev){
    node.firstChild.value = value || "";
    var style = ev.some_property ? "" : "none";
    node.style.display = style; // Область редактора
    node.previousSibling.style.display = style; // Заголовок секции
    gantt.resizeLightbox(); // Регулировка размера lightbox
}

Размещение секции и ее метки на одной линии

Вы можете выровнять секции lightbox и их метки на одной линии, установив опцию gantt.config.wide_form в true:

gantt.config.wide_form = true;
 
gantt.locale.labels.section_priority = "Priority";
gantt.locale.labels.section_status = "Status";
 
gantt.config.lightbox.sections = [
    {name: "description", height: 38, map_to: "text", type: "textarea", focus: true},
    {name: "status", height:22, map_to: "status", type: "select", options: [         
        {key:1, label: "New"},                                                       
        {key:2, label: "Open"},                                                     
        {key:3, label: "Done"}                                                      
    ]},                                                                            
    {name: "priority", map_to: "priority", type: "radio", options: [
        {key: 1, label: "High"},
        {key: 2, label: "Normal"},
        {key: 3, label: "Low"},
    ]},
    {name: "time", type: "duration", map_to: "auto"}
];
 
gantt.init("gantt_here");

Related sample:  Aligning Lightbox

Добавление кнопки в заголовок секции

Вы можете добавить пользовательскую кнопку в заголовок секции. Для этого выполните следующие шаги:

1. Добавьте свойство button в объект секции:

{name:"description", height:130, map_to:"text", type:"textarea", button:"help"}

1. Определите метку для кнопки:

//'help' это значение свойства 'button'
gantt.locale.labels.button_help = "Help label";

1. Укажите обработчик клика для кнопки:

gantt.form_blocks.textarea.button_click = function(index, button, shead, sbody){
    // Ваша пользовательская логика здесь
}

Вот параметры для обработчика:

• index - (number) Индекс секции, начиная с нуля.
• button - (HTMLElement) HTML-элемент для кнопки.
• shead - (HTMLElement) HTML-элемент для заголовка секции.
• sbody - (HTMLElement) HTML-элемент для тела секции.

Вы также можете настроить внешний вид кнопки, используя CSS-класс:

.dhx_custom_button_help {
    background-image: url(imgs/but_help.gif);
}

К началу