Перед тем как использовать компоненты билиотеки в своём проекте, вам необходимо продумать их расположение относительно страницы и друг друга. В вашем распоряжении 10 лейаутов, в которые можно поместить другие компоненты.
Для размещения компонентов рядом друг с другом (по умолчанию все элементы видны на странице) присмотритесь к следующим лейаутам:
Лейауты для компонентов, которые можно скрывать/показывать по очереди:
Лейауты, поддерживающие драг-н-дроп внутренних компонентов:
Любой из лейаутов можно поместить в другой.
Layout позволяет поделить страницу на ряды (rows) и колонки (columns), в которые можно поместить другие компоненты. Все компоненты видны на странице сразу.
Указывать имя лейаута необязательно. Достаточно задать rows или columns (cols) и поместить в них желаемые компоненты:
webix.ui({
rows:[
{ type:"header", template:"Header" }, // любой компонент
{ cols:[
{ view: "list", ... },
{ view: "chart", ... }
]
}
]
});
Related sample: Layout and Resizer
Внутри Form обычно располагаются контролы (поля, комбо-боксы, кнопки), которы можно организовать вертикально (rows) или горизонтально (cols). Form отличается от вышеупомянутого Layout наличием другого API для управления контролами, а также дополнительным внутренним отступом (паддингом) для разделения контролов и остальной части приложения.
Форме необходимо указать имя компонента - "form" (в объекте конфигурации).
webix.ui({
view:"form",
elements:[ // алиас для указания рядов
{ view:"text"}, // любой контрол
{ cols:[
{ view:"button", value:"Ok"},
{ view:"button", value:"Cancel"}
]
}
]
});
Ознакомьтесь с доступными в библиотеке Контролами.
Более подробную информацию о Form читайте в соответствующем разделе документации.
Toolbar вмещает в себя различные контролы (ярлыки, кнопки, иконки), которые располагаются вертикально (rows) и горизонтально (cols). В отличие от Layout контролы тулбара отделены от остальной части приложения.
Компоненту необходимо задать имя - "toolbar" (в объекте конфигурации).
webix.ui({
view:"toolbar",
elements:[ // алиас для указания колонок
{ view:"label", label:"My App"}, // любой компонент
{ }, //spacer
{ view:"label", label:"User"},
{ view:"button", value:"Settings"}
]
});
Ознакомьтесь с доступными в библиотеке Контролами.
Более подробную информацию о Toolbar читайте в соответствующем разделе документации.
У компонентов Accordion есть специальные панели, которые можно сворачивать и разворачивать по умолчанию или же при клике по хедеру. В коде Accordion состоит из элементов, каждый из которых помещён в отдельный ряд или колонку с хедером:
webix.ui({
view:"accordion", rows:[
{ view:"accordionitem", header:"Item1", body:{
view:"list" // любой компонент
}},
{ view:"accordionitem", header:"Item2", body:{...}}
]
});
Related sample: Accordion: Layout with headers
Имя для этого лейаута и его компонентов можно не задавать. Если вы укажите ряды и колонки со свойствами body и header, вы автоматически получите accordion с его элементами:
webix.ui({
rows:[
{ header:"Item1", body:{...}},
{ header:"Item2", body:{...}}
]
});
Более подробную информацию о Accordion читайте в соответствующем разделе документации.
ScrollView позволяет прокручивать весь контент, который содержит будь то лейаут или отдельный компонент внутри body:
webix.ui({
view:"scrollview",
body:{
rows:[
{ view:"chart"}, // любой компонент
{ ...}
]
},
scroll:"y" // направление скрола
});
Related sample: Scrollview: Templates with HTML content
Более подробную информацию о ScrollView читайте в соответствующем разделе документации.
Элементы внутри Carousel сменяют друг друга при клике по соответствующим контролам или при свайпе (на сенсорных устройствах). Лейаут позволяет организовать внутренние компоненты вертикально (rows) или горизонтально (columns), формируя таким образом направление движения:
webix.ui({
view:"carousel",
cols:[
{ view:"chart"}, // любой компонент
{...}
]
});
Related sample: Carousel: Basic
Более подробную информацию о Carousel читайте в соответствующем разделе документации.
Multiview - это лейаут с несколькими скрытыми компонентами, которые можно показывать с помощью специальных контролов.
Имя лейаута можно не указывать. Достаточно поместить желаемые компоненты в cells:
webix.ui({
view:"multiview", // необязательно
cells:[
{ view:"datatable"}, // любой компонент
{...}
]
});
Related sample: Multiview with Tabbar
После того, как вы определили компоненты, необходимо задать логику переключения между ними. Это можно сделать с помощью Tabbar или Segmented для горизонтального меню, или List - для вертикального.
Tabview
Это микс Multiview и Tabbar. Вы можете использовать этот компонент для создания Multiview с уже готовым переключателем:
webix.ui({
view:"tabview",
cells:[
{ header:"Tab1", body: {
view:"dataview" // любой компонент
}},
{ header:"Tab2", body:{...}}
]
});
Related sample: Tabview: Basic
Читайте подробнее о Multiview и Tabview.
Portlets умеет хранить компоненты, который можно перетаскивать. Элементы Portlets можно организовать в ряды (rows) и колонки (columns):
webix.ui({
rows:[
{ view:"portlet", body:{
template:"row 1" // любой компонент
}},
{ view:"portlet", body:{...}}
]
});
Related sample: Portlet: Reordering
Более подробную информацию о Portlets читайте в соответствующем разделе документации.
Dashboard позволяет размещать компоненты на абстрактной сетке и определять их изначальные местоположение и размеры внутри неё. Конечный пользователь может перемещать компоненты, а также менять их размеры, используя драг-н-дроп.
webix.ui({
view:"dashboard",
cells:[
{ view:"panel", x:0, y:0, body:{
view:"chart" // любой компонент
}},
{ view:"panel", x:1, y:0, body:{...}}
]
});
Related sample: Dashboard:Basic
Более подробную информацию о Dashboard читайте в соответствующем разделе документации.
Основные правила работы с ID описаны здесь.
Эта особенность касается каждого лейаута, описанного выше. Она позволяет использовать одни и те же ID для компонентов в разных секциях лейаута, сохраняя при этом возможность доступа к необходимому компоненту без окольных путей.
Секции лейаута необходимо задать свойство isolate:
webix.ui({
cols:[
{ id:"col1", isolate:true, rows:[
{ view:"list", id:"mylist" },
]},
{ id:"col2", isolate:true, rows:[
{view:"list", id:"mylist" },
]}
]
});
Компонент list использован в примере дважды. Обратите внимание на свойство isolate, значение которого true. Чтобы обратиться к какому-либо из списков, используйте ID родительской секции лейаута:
var list1 = $$("col1").$$("mylist");
var list2 = $$("col2").$$("mylist");
// иначе вы получите последний компонент
var list2 = $$("mylist");
Мы не рекомендуем использовать данную функциональность при разработке сложных приложений. Используйте Webix Jet для этих целей.