Быстрый старт с DHTMLX Suite UI

Если сравнивать DHTMLX и Ext JS, то последний слишком гранулированный фреймворк.

JavaScript-библиотеки для создания таблиц:
  • jqGrid;
  • SlickGrid.

DHTMLX предоставляет следующие компоненты:
• Grid
• Tree
• Tree Grid
• Layout
• Windows
• Toolbar
• DataView
• ColorPicker
• Editor
• Chart
• Menu
• Form
• Combo
• TabBar
• Calendar

DHTMLX предоставляет online skin builder и Visual Designer tool. Первый позволяет редактировать CSS текущего скина или выбрать другой скин. Второй позволяет создавать код визуально.

Для запуска DHTMLX приложений нужен веб-сервер. Для Windows можно взять WampServer. А для Mac-пользователей - MAMP.

Прежде чем скачивать библиотеку компонентов DHTMLX, надо создать соответствующую структуру папок в папке с приложением:
Код приложения будет лежать в папке application, а библиотека в папке dhtmlx.

Можно скачать всю библиотеку компонентов, это называется Suite. Из дистрибутива нужно распаковать содержимое dhtmlx_std_full.zip в папку dhtmlx.

Первый файл приложения это js/application/app.js. В начале этого файла надо задать следующий конфиг:
var config = {
 imagePath: "js/dhtmlx/imgs/",
 iconPath: ""
}

imagePath указывает путь для картинок используемых для стилизации компонентов.
В некоторых компонентах могут использоваться иконки. Например, в заголовке Modal Window или для кнопок инструментальной панели. DHTMLX не поставляется с иконками. Их нужно брать откуда-нибудь отдельно.

В файле js/application/storage.js поместим мини data access layer для "общения" с  HTML5 localStorage. Этот файл будет содержать CRUD-методы.

Приложение будет доступно через index.html.

<!DOCTYPE html>
<html lang="en">
 <head>
 <title>Users</title>
 <link href="js/dhtmlx/dhtmlx.css" type="text/css"
 rel="stylesheet" />
 <style>
 /* layout css */
 html, body { height: 100%; width: 100%; }
 </style>
<script src="js/dhtmlx/dhtmlx.js"></script>
<script src="js/application/storage.js"></script>
<script src="js/application/app.js"></script>
 </head>
 <body>
</body>
</html>

Все что нужно для использования библиотеки это подключить файлы dhtmlx.css и dhtmlx.js.
В файлах storage.js и app.js будет располагаться код приложения.

Дополнительно для html и body устанавливаются 100% ширина и высота для того чтобы DHTMLX layout component подгонял свой размер под размеры окна браузера.

Должна получиться такая структура:

Добавим layout через JS-консоль браузера Google Chrome:

Для этого введем команду
 new dhtmlXLayoutObject(document.body);


Теги: