Интеграция с DHTMLX Компонентами

DHTMLX это библиотека JavaScript компонентов, предназначенная для построения сложных Web приложений с удобным интерфейсом и высокой производительностью. Поскольку DHTMLX является нашим дружественным проектом, компоненты обеих библиотек весьма похожи и могут сосуществовать в одном приложении.

Файлы для интеграции находятся в этом репозитории.. Там вы найдете отдельные ресурсы для интеграции с DHTMLX v3.6 и ниже, а также DHTMLX v5.

Вы можете скачать нужные вам DHTMLX компоненты, перейдя по этой ссылке.

DHTMLX предоставляет широкий выбор UI компонентов различной сложности. Чтобы использовать тот или иной компонент, вам не нужно загружать целую библиотеку. Вы можете скачать только необходимые виджеты и применить их в своем приложении. Такой подход значительно повышает производительность приложения, поскольку компоненты не требуют дополнительных зависимостей.

Для начала, вам следует подключить соответствующие ресурсы интеграции:

<!-- обязательный JS код, который интегрирует Webix и DHTMLX -->
<script type="text/javascript" src="./dhtmlx.js"></script>

Затем, вам нужно подключить JS и CSS файлы выбранного компонента. Для примера, давайте используем DHTMLX Layout.

<!-- JS файл необходимого компонента -->
<script type="text/javascript" src="./dhtmlx/dhtmlxlayout.js"></script> 
 
<!-- CSS файл необходимого компонента -->
<link rel="stylesheet" href="./dhtmlx/dhtmlxlayout.css" type="text/css">

После этого, вы можете создать DHTMLX Layout и поместить в него Webix layout и Webix Datatable:

//создаем лейаут с тремя ячейками (3U type)
dhxLayout = new dhtmlXLayoutObject("parentId", "3U"); 
 
//задаем хедеры для каждой ячейки
dhxLayout.cells("a").setText("Main Page");
dhxLayout.cells("b").setText("Layout");
dhxLayout.cells("c").setText("DataTable");

Чтобы поместить Webix компонент в DHTMLX лейаут, вам следует использовать метод attachWebix(), передав ему соответствующие настройки:

// размещаем Webix layout во второй ячейке
dhxLayout.cells("b").attachWebix({
    type:"wide", rows:[
        { template:"1" },
        { type:"wide", cols:[ 
            { template:"2" },
            { template:"3" }
        ]}
    ]
});
 
// размещаем Webix datatable в третьей ячейке
dhxLayout.cells("c").attachWebix({
    view:"datatable",  
    columns:[...],
    data:[...]
});

Related Sample: Integration with DHTMLX Layout

С другими методами DHTMLX Layout вы можете ознакомиться в документации библиотеки.

Наверх