Advanced

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

Компоненты библиотеки Webix — это обычные JS объекты. Их можно копировать, наследовать и расширять новыми свойствами и методами.

Для примера, давайте рассмотрим компонент Toolbar, в настройках которого есть 3 свойства: width, paddingY и массив cols с тремя кнопками.

var barA = {
    view:"toolbar", width:500, paddingY:2,
    cols:[
        { view:"button", value:"Load" },
        { view:"button", value:"Save" },
        { view:"button", value:"Info" }
    ]
};

На примере этого виджета вы увидите, каким образом можно копировать и расширять компоненты.

Как скопировать настройки компонента

Допустим, у вас есть объект с настройками, который вы планируете использовать повторно (например, чтобы создать несколько одинаковых компонентов). В этом случае, вам необходимо скопировать настройки исходного компонента до его инициализации. В противном случае, некоторые параметры могут быть перезаписаны установщиком этого компонента.

Чтобы скопировать объект с настройками, вы можете использовать метод copy Он создает новый объект с аналогичными параметрами. Любые изменения в исходном объекте не будут влиять на его копию. Стоит учитывать, что метод не работает для структур, внутри которых есть зацикливание.

Давайте скопируем настройки тулбара, которые мы сохранили в переменной barA, и инициализируем 2 тулбара на странице:

var barB = webix.copy(barA);
webix.ui({
    rows:[
        barA,
        {},
        barB
    ]
});

Вы также можете использовать метод clone Он создает пустой экземпляр, который ссылается на исходный объект. Метод применяется в тех редких случаях, когда нужно дублировать поведение компонента. Примером может служить парный пейджер для навигации

Как расширить настройки компонента

Вы можете расширить настройки одного компонента уникальными свойствами другого. Для этого предусмотрен метод extend. Если изменить расширенные настройки в целевом объекте, то они изменятся и в ресурсном. Исходные свойства обоих компонентов не зависят от изменений в любом из них.

С помощью метода extend вы можете кастомизировать компонент определенными миксинами. На примере ниже показано, как добавить строку прогресса в компонент datatable:

webix.extend($$("grid"), webix.ProgressBar);

Для более детального ознакомления, обратитесь к API справочнику метода extend.

Наверх