Все Webix компоненты, они же views, наследуются от View. У этого класса есть API, которое и наследуют все компоненты: отрисовка, видимость, изменение размеров, различные хелперы.
View не предназначен для прямого использования. Вместо этого, в вашем распоряжении более 100 компонентов, которые инициализируются в конструкторе webix.ui:
Один компонент
webix.ui({
view:"dataview",
data: list_data
});
Компоненты (или views) можно помещать в другие, например Layout, и таким образом создавать комплексную структуру с родительскими и дочерними компонентами:
Компоненты в лейауте
webix.ui({
rows:[
{ view:"toolbar", cols:[ /*buttons*/ ]},
{ view:"dataview", data:list_data }
]
});
Любой компонент можно представить как абстрактный класс. Как только он создан, мы имеем дело с экземпляром компонента (он же view).
Вы можете получить экземпляр самого верхнего компонента, вернув его значение в webix.ui:
var app = webix.ui({ rows:[/* компоненты */]});
Вы можете пройтись вверх и вниз по иерархии компонентов:
// спускаемся вниз
var rows = layout.getChildViews(); // массив объектов
// поднимаемся вверх
var toolbar = button.getParentView(); // объект тулбара
Вы также можете найти компоненты по какому-либо критерию, используя queryView:
var button = toolbar.queryView("button"); // объект кнопки
Для взаимодействия с компонентами, можно указать им уникальный ID в объекте конфигурации:
webix.ui({
rows:[
{ view:"list", id:"order-list"},
{ view:"list", id:"data-list"}
]
});
После чего вы сможете получать экземпляры этих компонентов с помощью метода $$:
var list1 = $$("order-list"); // глобально
var list2 = webix.$$("data-list"); // или используя пространство имён webix
Если же вы не укажите ID, то он автоматически сгенерируется по шаблону "$component_name1" для каждого экземпляра компонента.
Вы можете получить указанный или сгенерированный ID через свойство компонента config, которое содержит и пользовательские, и настройки по умолчанию:
Сгенерированный ID
var list = webix.ui({
view:"list",
// другие настройки
});
var listId = list.config.id; // $list1 - автоматический ID
$$(listId).select(5);
Related sample: Auto-Generated ID
Однако мы не рекомендуем использовать авто-ID напрямую (как на примере выше: $$("$list1")). Это небезопасно, потому что такие ID могут менятся в случае нового экземпляра одного и того же компонента, добавленного в приложение.
Резюмируем:
Среди компонентов Webix есть плейсхолдер/спейсер - Spacer. Его можно использовать для создания пустой зоны между другими компонентами, напрмиер, чтобы выровнять их.
Всего лишь с помощью двух фигурных скобок ({}) можно инициализировать спейсер, а указывать имя необязательно. Вы можете задать ему ширину, высоту или удельный размер, если требуется.
Выравниваем кнопки на тулбаре
webix.ui({
view:"toolbar", cols:[
{ view:"button", value:"but1"}, // слева
{ },
{ view:"button", value:"but2"} // справа
]
})
Если вам нужно добавить какой-либо текст или HTML внутрь Webix лейаута, используйте компонент Template:
{
view:"template", // указывать необязательно
template:"<b>Hello<b>, world!"
}
Related sample: Default Template
Вы также можете задать более сложные темплейты для элементов таблиц, списков и прчоего. Основные правила при создании темплейтов описаны здесь.
Компоненты можно помещать в HTML-элементы. Укажите ID HTML-элемента в качестве значения свойства container:
// body документа
<div id="mylayout" style="width:600px;height:400px;"></div>
// скрипты документа
webix.ui({
view:"layout",
container:"mylayout",
rows:[ /*массив компонентов*/ ]
});
У такого подхода есть пара ограничений:
Методы используются для получения родительского объекта. Можно вызывать на любом компоненте:
webix.ui({
id:"mylayout", rows:[
{ view:"toolbar", id:"mybar", cols:[
{ view:"button", id:"mybutton" }
]},
{ template:"Text"}
]
});
var t = $$("mybutton").getParentView(); // объект тулбара, "mybar"
var l = $$("mybutton").getTopParentView(); // объект лейаута, "mylayout"
Метод возвращает экземпляр родительской формы, в которой расположен компонент. Метод особенно полезен в случае комплексных форм:
webix.ui({
view:"form", id:"myform", elements:[
{ view:"text"},
{ cols:[
{ view:"checkbox", id:"mybox"}
]},
{ view:"combo", options:["one", "two"]}
]
});
$$("mybox").getFormView(); // экземпляр формы с ID "myform"
Метод возвращает массив дочерних элементов компонента (Layout, Multiview, Form, и др.).
Например, если внутри Layout у вас есть Toolbar с тремя кнопками, метод вернёт следующее:
var bar = $$("mylayout").getChildViews()[0]; // экземпляр тулбара
var but = $$("mybar").getChildViews()[1]; // экземпляр второй кнопки
Как и вышеупомянутый метод, index() работает с компонентами, которые включают в себя другие.
Метод возвращает индекс дочернего компонента по его ID:
webix.ui({
view:"layout", // указывать необязательно
id:"mylayout",
rows:[
{ id:"cell1", view:"list", ... },
{ id:"cell2", view:"form", ... },
{ id:"cell3", view:"dataview", ... }
]
});
$$("mylayout").index($$("cell1")); // 0
Метод поможет найти необходимый компонент в лейауте. В качестве критерии поиска можно передать имя компонента, настройки или функцию:
// возвращает экземпляры всех кнопок на тулбаре
$$("mybar").queryView("button", "all");
Метод помогает получить HTML-элемент компонента:
webix.ui({
view:"toolbar", id:"mybar", elements: [/*кнопки*/]
});
var box = $$("mybar").getNode();
Также вы можете получить HTML компонента через свойство $view:
var box = $$("mybar").$view; // не изменяйте это свойство
Метод используется с контролами форм (например, Text для получения HTML-элемента области ввода
webix.ui({
view:"button", id:"mybutton",
value:"Login", css:"webix_primary"
});
$$("mybutton").getInputNode();
Ознакомьтесь с полным списком методов, параметров и событий View.
Наверх