Intermediate

Изменение размеров компонентов

Существует два способа изменения размера компонента:

Задать новые значения самому компоненту и применить метод resize().
Задать новые значения контейнеру компонента и применить метод adjust() к компоненту.

Об изменениях размеров с помощью перетаскиваемой границы, а также адаптивном поведении при изменении размеров окна рассказываем отдельно.

Как изменить размеры компонента

За размеры компонента отвечают свойства width (ширина) и height (высота). Вы можете изменить эти свойства одним из двух способов:

с помощью метода define():

Меняем ширину dataview с 500px на 700px

dtable = new webix.ui({
    view:"datatable",
    width: 500,
    ...
})
 
dtable.define("width", 700);
dtable.resize();
 
// или сразу и ширину, и высоту
dtable.define({
    width:700,
    height:500
});
dtable.resize();

через доступ к config компонента:

Меняем ширину и высоту dataview

$$("dview").config.width = 261;
$$("dview").config.height = 700;
$$('dview').resize();

Related sample: Resizing

Как изменить размеры контейнера компонента

Контейнер - это HTML элемент, в который помещается компонент.

Когда вы меняете размеры контейнера и вызываете метод adjust() у компонента (необязательно), он подстраивает свои размеры под новые размеры контейнера.

Помещаем datatable в контейнер testA

<div id="testA" style="width:500px;"></div>
// ...
grid = new webix.ui({
    view:"datatable",
    container:"testA",
    // ...
});

Размеры контейнера можно изменить двумя способами:

через обращение к DOM

document.getElementById('testA').style.height="455px";
grid.adjust();

Related sample: Resizing

используя метод Webix toNode():

webix.toNode("testA").style.width = "700px";
grid.adjust();

Вы также можете подогнать размеры компонента под контейнер с динамическими размерами.

Как изменить размеры сразу нескольких компонентов

Если вам необходимо изменить размеры сразу нескольких компонентов внутри одного родительского контейнера (например, dataviews, lists, datatables) внутри одного лейаута, вызовите метод resize() у родительского элемента и передайте в него аргумент true.

webix.ui({
    view:"layout", // указывать необязательно 
    rows:[
        {view:"dataview"},
        {view:"list"},
        {view:"datatable"}
    ]
});
 
$$("dataview1").define("width", 300);
$$("list1").define("width", 350);
$$("datatable1").define("width", 420);
 
$$("layout1").resize(true);

Чтобы менять размеры дочерних элементов компонента, используйте метод resizeChildren():

$$("accordion").resizeChildren();

Рекомендуем ознакомиться со статьёй об изначальных размерах компонентов.

Наверх