The properties of Webix components can be changed after initialization each time the define() method is applied to them. It takes the following 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
$$("mylist").define({
url: "new_data.xml",
height: 300
});
In order that new properties came into force, you should apply either of these methods to the redefined component:
$$("layout").define("rows", [ {view:"button", ...}, {view:"label", ...} ]);
$$("layout").reconstruct();
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 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 1st column width
var colWidth = $$("mytable").config.columns[0].width; // 200
//resizing the 1st column
dtable.resize();
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 width of the item, you should use customize() method instead of define() - the arguments are the same:
$$("list1").customize({ width:210}); //item width changes
$$("list1").refresh();
More about Type Implementation.
Back to top