Intermediate

Changing Properties of Components

Defining New properties

The properties of Webix components can be changed after initialization each time the define() method is applied to them. It takes the following arguments:

a component's property you want to change;
the new value for this property.

The method can be applied to any object pointed to by its ID:

// sets a new height for the list
$$("mylist").define("height", 300);
$$("mylist").refresh();
 
// changes the label of the button
$$("button1").define("label", "New value");
$$("button1").refresh();

The method can also take a hash of property-value pairs to change multiple properties at once:

// sets new width and height for the list
$$("mylist").define({
    width:300,
    height: 300
});
$$("mylist").refresh();

Webix has a rich API that allows performing various operations and can be used instead of the define() method. So we advise you to look up a suitable method in the API reference before use the define() method.

Applying Property Changes

In order that new properties came into force, you should apply either of these methods to the redefined component:

refresh() - used to repaint a single component and doesn't affect the page structure. It's used for data-containing components (list, datatable, chart etc. and all controls).
reconstruct() - used to rebuild the component that affect the page structure. It concerns components that build application layout and house other components and controls: layout, multiview, accordion, carousel, form and toolbar.

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

The reconstruct() method is out-of-date. We recommend you to use more modern techniques of rebuilding components that are described in the section Rebuilding Application Layout.

resize() - adjusts a component to the new size.

Changing the Component's Config

The desired configuration parameter can be accessed and changed through the config property as well.

//reading height
var height = $$("myList").config.height;
//setting new height
$$("myList").config.height = 400;
$$("muList").resize();

Changing component properties via config comes in handy when getting and setting values for component items that are stored in an array that is a property itself.

Defining width of a datatable column

webix.ui({
    view:"datatable",
    id:"mytable",
    columns:[
        { id:"col_1", header:"Film title",width:200},
        { id:"col_2", header:"Released" , width:80}
    ]
})
// reading width of the 1st column
var colWidth = $$("mytable").config.columns[0].width; // 200
 
// resizing the 1st column
dtable.resize();

Redefining Item Properties

Type with data-containing components denotes the way each data item looks like, rather than look-and-feel of the whole component.

webix.ui({
    view:"list",
    type:{
        width:200, // item width
        height: 50
    },
    width: 250 // list width
    ..
});

To redefine the width of the item, you should use the customize() method instead of the define() one. The arguments are the same:

$$("list1").customize({ width:210}); // item width changes
$$("list1").refresh();

More about Type Implementation.