Динамические изменения UI

Библиотека Webix предлагает несколько способов изменять уже инициализированный лейаут:

добавить новый компонент в уже существующий лейаут (включая сложные компоненты с большим количеством дочерних элементов);
удалить компонент с существующего лейаута;
перестроить компонент, передав в него массив новых дочерних элементов;
заменить любой компонент в лейауте другим.

Далее мы рассмотрим каждый из способов более детально.

Динамическое добавление/удаление компонентов

Вы можете добавлять и удалять компоненты динамически, уже после того, как лейаут был инициализирован. Такой способ применим к:

рядам и колонкам лейаута;
клеткам multiview;
панелям accordion и carousel;
контролам тулбара;
контролам форм.

Добавление и удаление компонентов реализуется с помощью методов addView() и removeView().

Как добавить компонент

Чтобы добавить новый компонент (ряд и колонку лейаута, ячейку multiview, панель accordion, контрол тулбару или форме) задайте объект компонента и позицию, куда его добавить.

Добавляем кнопку в тулбар

var id = $$("toolbar").addView({
    view:"button", value:"new button", 
}, index);

Index определяет позицию среди других дочерних элементов компонента, куда добавлять новый компонент или контрол. Это может быть:

первая позиция (index 0);
последняя позиция (index -1);
любая позиция.

Индекс любого компонента можно получить с методом index, вызвав его у Webix компонента ((лейаута, multiview, accordion, карусели, форма, тулбара).

Добавляем компонент

webix.ui({
    id:"layout1",
    rows:[
        {view:"text", id:"text1"},
        {view:"button", value:"Add View", click:addView}
    ]
});
 
var pos = $$("layout1").index($$("text1"));
$$("layout1").addView({view:"text", id:"text2"}, pos);

Related sample: Adding Views

Вы можете изменить размеры нового при добавлении компонента, соблюдая общие правила или позже - через инструменты для переопределения свойств.

Как удалить компонент

Метод removeView() вызывается у родительского компонента и удаляет дочерние элементы. Метод принимает объект дочернего компонента или его ID в качестве параметра.

Убираем кнопку с тулбара

$$("toolbar").removeView(id);

Related sample: Adding Views

Как перестроить лейаут приложения

В этой секции описаны продвинутые возможности метода webix.ui(). Помимо своей основной цели, создания Webix компонента, этот метод может быть использован для изменения лейаута. Для этого необходимы дополнительные параметры:

объект конфигурации - (object, array) JSON объект с конфигурацией приложения любого уровня сложности;
родительский элемент - (id | object) Webix компонент, который является родителем объекту, который вы собираетесь инициализировать (тот, который передаётся первым параметром);
объект для замещения - (id, index | object) Webix компонент в родительском объекте, который будет замещён новым объектом (тот, который передаётся первым параметром).

Поэтому конструктор webix.ui() можно использовать для следующих целей:

перерисовка лейаутов (лейаут, multiview, форма, accordion) у которых есть массивы элементов:

webix.ui({
    view:"form", id:"myform", elements:[...]
});
 
// перерисовка формы с новыми элементами
webix.ui([// ...new elements], $$("myform"));

заменить любой существующий объект:

webix.ui({
    id:"mylayout",
    rows:[
        {view:"toolbar", ...},
        {view:"datatable", id:"mydatatable" ...},
    ]
});
 
// замещаем datatable
webix.ui({//...new config}, $$("mylayout"), $$("mydatatable"));

В примере выше мы переопределили компонент "mydatatable" новым объектом конфигурации. Компонент "mylayout" стал родительским элементом для этого объекта. При отрисовке нового компонента, объект конфигурации займёт контейнер компонента "mydatatable".

Вы также можете передать 2 аргумента, опуская родительский контейнер. Результат останется тем же.

Перезагрузка лейаута с сервера

Чтобы загрузить новый объект конфигурации с сервера, используйте следующий способ:

webix.ajax("config.json", function(text){
    webix.ui(webix.DataDriver.json.toObject(text), $$("mylayout"), $$("mydatatable"));
});

config.json содержит новую конфигурацию.

Наверх