Advanced

Component Copying and Extending

Components in the Webix UI library are objects that can be cloned and copied. They can also inherit properties from each other.

Let's take for instance the Toolbar component and play around with it. It has three properties: width, paddingY and the cols object with three buttons.

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

This component will be used further to illustrate possible ways of copying and extending components.

Copying of Configuration

If you have an object with configuration settings that you want to reuse (i.e. create several components with the same configuration), you need to copy the configuration before the first component is initialized. This is necessary because some of the settings can be overwritten with the setters of the component.

To create a copy of the configuration object, use the copy method. The copy is fully independent. So, if later on you make changes in the source object, the properties of the target object will remain unchanged. However, the method doesn't work for structures with inner loops.

Let's copy the configuration of the barA toolbar and initialize two toolbars:

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

You can also use the clone method to create an empty object with a prototype reference to the original object. It is used in very rare cases, for example for creating a two-area pager

Extending Configuration

New components can be created based on existing configuration objects and modules. There is the extend method that merges the properties of two objects into a new object. If any of the shared properties gets changed in the target object, it is changed in the source one as well. Native properties of the two objects are independent.

For example, you can use the extend method to extend components with mixins for enhancing widget functionality. This is how you can add an ability to show the progress bar in a datatable:

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

For more details, refer to the API page of the extend method.