DHTMLX Suite UI

• Быстрый старт
• Структуры данных, хранилища и callback-и
• Layout
• Toolbar
• Grid
• Window
• Форма и календарь
• Диаграммы

DHTMLX Chart

DHTMLX позволяет создавать следующие виды диаграмм: area, horizontal bar, vertical bar, stacked vertical bar, stacked horizontal bar, donut, line, pie, radar, scatter и spline.

DHTMLX Form и Calendar

Компонент DHTMLX form позволяет создавать формы или преобразовывать уже существующие HTML-формы. Форма может иметь следующие элементы:  button, checkbox, container, input, file, hidden, label, multiselect, password, radio, select, template, textarea и upload.

DHTMLX Window

Создание нового dhtmlXWindows объекта:

var myWindows = new dhtmlXWindows({
    image_path: config.imagePath,
    wins: [{
        id: "w1",
        height: 200,
        width: 200,
        text: "One"
    }, {
        id: "w2",
        height: 200,
        width: 200,
        text: "Two",
        left: 20,
        top: 20
    }, {
        id: "w3",
        height: 200,
        width: 200,
        text: "Three",
        left: 40,
        top: 40
    }]
});

После выполнения этого кода на странице будет создано 3 pop-up окна.

DHTMLX Grid

Порядок создания таблицы:
1. Create the grid object
2. Apply settings
3. Initialize
4. Add data

Как и все остальные DHTMLX объекты, DHTMLX grid можно прикрепить к DOM-элементу или к лейауту/ячейке.

document.body.innerHTML = "<div id='myGridCont'></div>";
var myGrid = new dhtmlXGridObject("myGridCont");
myGrid.setImagePath(config.imagePath);
myGrid.setHeader(["Column1", "Column2", "Column3"]);
myGrid.init();

// или

var myGrid = appLayout.cells("a").attachGrid();
myGrid.setImagePath(config.imagePath);
myGrid.setHeader(["Column1","Column2","Column3"]);
myGrid.init();

DHTMLX Toolbar

DHTMLX toolbar можно положить внутри ячейки, лейаута или DOM-элемента. К ячейку или лейауту нельзя цеплять больше одного тулбара.

DHTMLX Layout

DHTMLX layout имеет предопределенные паттерны для разметки.

Структуры данных, хранилища и callback-и в DHTMLX Suite UI

До появления localStorage в HTML5 единственным способом передавать данные между страницами были cookies. Они ограничены в размере и посылаются на сервер с каждым запросом. localStorage можно использовать для кэширования Ajax-запросов или для работы offline. HTML5 localStorage хранит данные в виде пар ключ-значение.

localStorage.setItem(key,value) // sets item value
localStorage.getItem(key) // returns item value
localStorage.key(nth) // returns key of the enumeration
localStorage.clear() // clears all stored values
localStorage.length // returns number of items

Ключ и значение хранятся в виде DOMStrings. Если сохранять int-значение, то оно сохранится как string-значение. Если сохранять объект, то он сохранится как "[object type]", где type - это тип объекта. Поэтому надо использовать метод JSON.stringify(). Для обратной операции используется функция JSON.parse().

Быстрый старт с 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