Intermediate

Изменение свойств компонентов

Определяем новые свойства

Свойства Webix компонентов можно менять после инициализации с помощью метода define(). Метод принимает следующие параметры:

свойство компонента, которое вы хотите изменить;
новое значение для этого свойства.

Вы можете применить этот метод к любому объекту, указав его ID:

// задаёт новую высоту компонента
$$("mylist").define("height", 300);
$$("mylist").refresh();
 
// меняет ярлык кнопки
$$("button1").define("label", "New value");
$$("button1").refresh();

Метод также может принимать хэш пар свойство-значение дял изменения нескольких свойств сразу:

// задаёт новую ширину и высоту компоненту
$$("mylist").define({
    width:300,
    height: 300
});
$$("mylist").refresh();

Webix предлагает и другие, отличные от метода define(), решения для подобных задач. Рекомендуем поискать подходящий вам метод на странице API прежде чем использовать метод define().

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

Для того чтобы новые свойства вступили в силу, вам следует обратиться к одному из следующих методов изменяемого компонента:

refresh() - используется для перерисовки одного компонента и не влияет на структуру страницы. Метод используется для компонентов с данными (list, datatable, chart и др., а также всех контролов).
reconstruct() - используется для перестройки компонента и влияет на структуру страницы. Метод касается компонентов, которые состовляют лейаут приложения и содержат в себе другие компоненты и контролы: layout, multiview, accordion, carousel, form и toolbar.

$$("layout").define("rows", [ {view:"button", ...}, {view:"label", ...} ]);
$$("layout").reconstruct();

Метод reconstruct() считается устаревшим. Мы рекомендуем использовать более слвоеменные техники, описанные здесь.

resize() - подстраивает компонент под новые размеры.

Как изменять конфигурацию компонента

Вы можете получить доступ к желаемому параметру через свойство config.

// доступ к высоте
var height = $$("myList").config.height;
// устанавливаем новое значение
$$("myList").config.height = 400;
$$("muList").resize();

Изменение свойств компонента особенно удобно в случаях чтения и установки значений элементов компонента, которые хранятся в свойстве array.

Задаём ширину столбца колонки

webix.ui({
    view:"datatable",
    id:"mytable",
    columns:[
        { id:"col_1", header:"Film title",width:200},
        { id:"col_2", header:"Released" , width:80}
    ]
})
// читаем ширину первой колонки
var colWidth = $$("mytable").config.columns[0].width; // 200
 
// изменяем размер первой колонки
dtable.resize();

Как переопределять свойства

Свойство type у компонентов данных задаёт внешний вид скорее элементам компонента, чем самому компоненту.

webix.ui({
    view:"list",
    type:{
        width:200, // ширина элемента
        height: 50
    },
    width: 250 // ширина списка
    ..
});

Чтобы переопределить ширину элемента, вместо метода define() используйте customize(). Параметры остаются те же:

$$("list1").customize({ width:210}); // изменяется ширина элемента
$$("list1").refresh();

Подробнее о свойстве Type.

Наверх