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}
// другие ячейки
]
});
| 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' |
| onAfterDrop | срабатывает после завершения драг-н-дропа |
| onBeforeDrag | срабатывает до нажатия кнопки мыши и перемещения курсора на панель |
| onBeforeDragIn | срабатывает до того, как перетаскиваемая панель переместится на dashboard |
| onBeforeDrop | срабатывает до того, как перетаскиваемую панель отпускают над целью перетаскивания |
| onBindRequest | срабатывает, когда компонент готов получить данные из главного компонента |
| onChange | срабатывает после изменений в gridlayout |
| onDestruct | происходит, когда компонент был разрушен деструктором |
| onDragOut | срабатывает, когда перетаскиваемая панель перемещена за пределы компонента dashboard |
| onViewShow | срабатывает, когда компонент появляется (вызов метода show()) |
| 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 | задает ширину компонента |
| $dragCreate | этот метод вызывается в момент начала драг-н-дропа |
| $dragDestroy | метод вызывается после завершения драг-н-дропа |
| $dragIn | метод вызывается, когда перетаскиваемый элемент попал в зону над возможной целью перетаскивания |
| $dragOut | метод вызывается, когда перетаскиваемый элемент покидает зону над возможной целью перетаскивания |
| $dragPos | определяет позицию перетягиваемого элемента |
| $drop | метод вызывается, когда элемент перемещён на подходящую цель |
| $getSize | возвращает текущий размер компонентов |
| $height | текущая высота компонента |
| $setNode | определяет HTML-элемент компонента |
| $setSize | задает размеры компонента |
| $skin | вызывается после применения скина |
| $view | возвращает HTML-элемент компонента |
| $width | текущая ширина компонента |
| config | все настройки, заданные при инициализации компонента |
| name | возвращает имя компонента (свойство только для чтения) |