addView

adds a new view to a grid layout or moves an existing one

view	object	the configuration of the view
index	number	the index a new view will be added at or an existing one will be moved to

string|number

the id of the view

Example

webix.ui({
    view:"gridlayout", 
    id:"grid",
    gridColumns:4, gridRows:3,
    cells:[
        { id:"a", template:"Single", x:0, y:0, dx:1, dy:1 },
        { id:"b", template:"Wide 1", x:1, y:0, dx:2, dy:1 }
        // more cells
    ]
});
 
$$("grid").addView({ template:"Column", x:1, y:1, dx:1, dy:1 });
 
// moves an existing child view to a different index 
$$("grid").addView($$("child"), 3);

Related samples

For this view, the index specified in addView() will have no visual effect since child views are placed at absolute coordinates. However, getChildViews() will return child views in the actual order.

A GridLayout cell has the following attributes:

• x - (number) the x-index of a grid cell starting point
• y - (number) the y-index of a grid cell starting point
• dx - (number) the width of a view defined as a number of grid cells
• dy - (number) the height of a view defined as a number of grid cells

Back to top