DHTMLX Layout

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


Например, паттерн 2U задает два столбца.


На данный момент в DHTMLX нельзя создать свой custom layout pattern. Но можно комбинировать существующие.

Инициализация layout-компонента может быть выполнена двумя способами:
  1. прикреплением нового layout-объекта к существующей ячейке;
  2. или прикреплением его к DOM-элементу на странице.

Код
new dhtmlXLayoutObject(document.body);
аналогичен коду
new dhtmlXLayoutObject(document.body, "3E");
и создает layout с тремя ячейками.

Пример прикрепления дочернего layout-объекта:
var myLayout = new dhtmlXLayoutObject(document.body, "2U");
var myChildLayout = myLayout.cells("a").attachLayout("3E");

Примеры изменения размеров:
var myLayout = new dhtmlXLayoutObject(document.body, "3T");

myLayout.cells("a").setHeight(55);
myLayout.cells("b").setWidth(70);

myLayout.cells("b").fixSize(0,1);

myLayout.cells("b").fixSize(1,1);
Метод fixSize позволяет зафиксировать размер и принимает в качестве аргументов Boolean значения для осей x и y.

Методы для работы с заголовком:
myLayout.cells("c").hideHeader();

myLayout.cells("c").showHeader();

myLayout.cells("a").setText("My Top Cell");

Layout-объекты и cell-объекты могут показывать индикатор прогресса загрузки:
myLayout.progressOn();

myLayout.progressOff();

Для layout-ов можно обрабатываться такие события как onResizeFinish, onExpand, onCollapse и onDblClick.

DHTMLX предоставляет методы attachEvent и detachEvent.
var myEventId = myLayout.attachEvent("onResizeFinish", function(){
 console.log("Layout Resized");
});

myLayout.detachEvent(myEventId);

myLayout.detachAllEvents();

DHTMLX также позволяет обрабатывать DOM-события:
dhtmlxEvent(window,"load", function(){
 // Code to be run on page load
});
Наименование метода передается без префикса on.

Пример создания лейаута в файле app.js:
// Layout
var appLayout;
dhtmlxEvent(window, "load", function(){
 appLayout = new dhtmlXLayoutObject(document.body, "2U");
 appLayout.cells("a").hideHeader();
 appLayout.cells("b").setText("User Chart");
});


Теги: