Webix lib offers several ways to alter the already initialized layout:
Let's consider these possibilities in detail:
You can add and remove components dynamically after you've already inited layout and set some components. It works for:
Adding and removing views is implemented with the help of the addView() and removeView() methods.
To add the new view (layout row and column, multiview cell, accordion panel, as well as any toolbar or form control) - specify the view object and position to insert.
Adding a button to the toolbar
var id = $$("toolbar").addView({
view:"button", value:"new button",
}, index);
Index defines position where the new component or control should be inserted among the children of the parent component. It can be
Adding View
webix.ui({
id:"layout1",
rows:[
{view:"text", id:"text1"},
{view:"button", value:"Add View", click:addView}
]
});
var pos = $$("layout1").index($$("text1"));
$$("layout1").addView({view:"text", id:"text2"}, pos);
Related sample: Basic Initialization
The newly added view can be sized during adding according to common rules as well as later on via property (re)defining.
removeView() method removes components from layouts and is called from the parent component to remove any of its children. The method takes a child view object or its id as an argument.
Removing a button from the toolbar
$$("toolbar").removeView(id);
Related sample: Basic Initialization
Here we look at advanced possibilities of webix.ui() method.
Besides its main purpose - instantiation of Webix component, it method can also be used for changing layout provided that additional params are passed to it.
All in all, its parameters include:
Thus webix.ui() constructor can be used to:
webix.ui({
view:"form", id:'myform', elements:[...]
});
//redraw form with new elements
webix.ui([..new elements..], $$('myform'));
Related sample: Dynamic Layout Rebuilding
webix.ui({
id:'mylayout',
rows:[
{view:'toolbar', ...},
{view:'datatable', id:'mydatatable' ...},
]
});
//replace datatable
webix.ui({..new config..}, $$('mylayout'), $$('mydatatable'));
Related sample: Dynamic Layout Rebuilding
To load a new configuration from the server - you can use the following technique:
webix.ajax("config.json", function(text){
webix.ui(webix.DataDriver.json.toObject(text), $$('mylayout'), $$('mydatatable'));
});
where the config.json contains the new configuration.
Back to top