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 as arguments.

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

//loads new data to the list
$$("mylist").define("url", "new_data.xml");
//sets new height for the list
$$("mylist").define("height", 300);
//changes the label of the button
$$("button1").define("label", "New value");

The method as well takes hash of property-value pairs to change multiple properties at once:

//set new data and height for the list
    url: "new_data.xml",
    height: 300

Webix has 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 page structure. It's used for data-containing components (list, datatable, chart etc. and all controls).
  • reconstruct() - used to rebuild the component that affect page structure. It concerns components that build application layout and house other components and control: layout, multiview, accordion, carousel, form and toolbar.
$$("layout").define("rows", [ {view:"button", ...}, {view:"label", ...} ]);

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;

Changing component properties via config comes 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

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

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.

        width:200, //item width
        height: 50
    width: 250 //list width

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

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

More about Type Implementation.

Back to top