ui.dashboard

Since 5.1

Построенный на GridLayout компонент, который позволяет размещать элементы интерфейса на перемещаемых панелях.

Webix Grid Dashboard - это лейаут, в котором все компоненты размещены на гриде (как в ячейках таблицы). Пользователи могут перемещать компоненты, изменять их размеры. Вы также сможете позволить пользователям динамически создавать интерфейс и сохранять/восстанавливать его предыдущее состояние.

Подробнее читайте в описательной документации.

Инициализация

var dashboard = webix.ui({
    view:"dashboard",
    gridColumns:4, gridRows:3,
    cellHeight: 200, cellWidth: 200,
    cells:[
        { view:"panel", body:{ template:"Single" }, x:0, y:0, dx:1, dy:1},
        { view:"panel", body:{ template:"Wide 1" }, x:1, y:0, dx:2, dy:1},
        { view:"panel", body:{ template:"Wide 2" }, x:0, y:1, dx:2, dy:1}
        // другие ячейки
    ]
});

С чего начать

Methods
addView добавляет новую панель (cell) в dashboard или перемещает существующую
adjust подстраивает размеры компонента под размеры HTML-контейнера
attachEvent задает обработчик внутреннего события компонента
bind связывает данные компонентов
blockEvent временно блокирует вызов ВСЕХ событий вызывающего объекта
callEvent вызывает внутреннее событие компонента
clearAll удаляет все компоненты из gridlayout
define переопределяет одну или несколько настроек компонента
destructor разрушает компонент
detachEvent удаляет обработчик события (который был задан ранее методом attachEvent)
disable блокирует компонент (он становится серым, клики по нему не срабатывают)
enable делает активным ранее заблокированный компонент
getChildViews возвращает внутренние компоненты
getFormView возвращает объект формы, которой принадлежит компонент
getNode возвращает HTML-элемент компонента
getParentView возвращает родительский компонент
getTopParentView возвращает самого верхнего родителя
hasEvent проверяет, есть ли у компонента обработчики указанного события
hide скрывает компонент
index возвращает порядковый номер (индекс) компонента лейаута
isEnabled проверяет, активен или заблокирован компонент
isVisible проверяет, виден ли компонент
mapEvent направляет события от одного компонента к другому
moveView перемещает компонент внутри сетки и изменяет его размеры
queryView возвращает внутренние компоненты, которые удовлетворяют указанному условию
reconstruct перестраивает лейаут
removeView удаляет компонент из лейаута
resize перерисовывает компонент после изменения размеров
resizeChildren перерисовывает все компоненты внутри лейаута
restore восстанавливает состояние лейаута
serialize сохраняет текущее состояние лейаута в JSON объект
show делает компонент видимым
showBatch делает видимыми те элементы, параметр 'batch' которых задан определенным именем
unbind отменяет связывание компонентов
unblockEvent отменяет блокировку событий, которая была вызвана командой 'blockEvent'
Events
onAfterDrop срабатывает после завершения драг-н-дропа
onBeforeDrag срабатывает до нажатия кнопки мыши и перемещения курсора на панель
onBeforeDragIn срабатывает до того, как перетаскиваемая панель переместится на dashboard
onBeforeDrop срабатывает до того, как перетаскиваемую панель отпускают над целью перетаскивания
onBindRequest срабатывает, когда компонент готов получить данные из главного компонента
onChange срабатывает после изменений в gridlayout
onDestruct происходит, когда компонент был разрушен деструктором
onDragOut срабатывает, когда перетаскиваемая панель перемещена за пределы компонента dashboard
onViewShow срабатывает, когда компонент появляется (вызов метода show())
Properties
animate определяет анимацию для показа компонента в Multiview
autoplace перестраивает лейаут после добавления новых компонентов так, что первый ряд ячеек всегда заполнен
borderless скрывает или показывает границы компонента
cellHeight задает высоту ячейки в пикселях
cellWidth задает ширину ячеек в пикселях
cells задает компоненты для abslayout
cols массив колонок лейаута
container HTML-контейнер (или его ID), внутри которого компонент должен быть инициализирован
css имя CSS-класса, который будет присвоен HTML-элементу компонента, или объект со стилями
disabled блокирует или разблокирует компонент
factory задает схему для создания компонентов в gridlayout
gravity задает удельный (относительный) размер компонента
gridColumns задает число колонок в сетке
gridRows задает число рядов в сетке
height задает высоту компонента
hidden скрывает компонент после его инициализации
id ID компонента
margin задает величину промежутков между компонентами в сетке (для всех компонентов сразу)
maxHeight задает максимальную высоту компонента
maxWidth задает максимальную ширину компонента
minHeight задает минимальную высоту компонента
minWidth задает минимальную ширину компонента
on позволяет присоединять обработчики к внутренним событиям компонента
padding задает отступы между границами сетки и внешними границами компонентов внутри сетки (применяется ко всем сторонам gridlayout)
paddingX задает правый и левый отступы
paddingY задает верхний и нижний отступы
responsive включает адаптивность для лейаута
rows ряды лейаута
visibleBatch задает группу контролов, которые будут видны после инициализации
width задает ширину компонента
Other
$dragCreate этот метод вызывается в момент начала драг-н-дропа
$dragDestroy метод вызывается после завершения драг-н-дропа
$dragIn метод вызывается, когда перетаскиваемый элемент попал в зону над возможной целью перетаскивания
$dragOut метод вызывается, когда перетаскиваемый элемент покидает зону над возможной целью перетаскивания
$dragPos определяет позицию перетягиваемого элемента
$drop метод вызывается, когда элемент перемещён на подходящую цель
$getSize возвращает текущий размер компонентов
$height текущая высота компонента
$setNode определяет HTML-элемент компонента
$setSize задает размеры компонента
$skin вызывается после применения скина
$view возвращает HTML-элемент компонента
$width текущая ширина компонента
config все настройки, заданные при инициализации компонента
name возвращает имя компонента (свойство только для чтения)
Наверх