All Webix interface-building components aka views inherit from View, a base class with some common API that all its successors share: painting, visibility, sizing, helpers to browse Webix hierarchy.
View is not used directly. Instead, there are over 100 components that are initialized within webix.ui constructor:
Single component
webix.ui({
view:"dataview",
data: list_data
});
Views themselves can be put into other views like Layout thus creating a complex structure with parent and child components:
Components in layout
webix.ui({
rows:[
{ view:"toolbar", cols:[ /*buttons*/ ]},
{ view:"dataview", data:list_data }
]
});
Any component acts as an abstract class. Once it is created, we deal with component (or view) instance.
You can get the instance of the topmost view as a return value of webix.ui:
var app = webix.ui({ rows:[/* components*/]});
You can browse the hierarchy up and down:
//down
var rows = layout.getChildViews(); //array of objects
//up
var toolbar = button.getParentView(); //toolbar object
Or, search for specific views while applying the needed criteria via queryView:
var button = toolbar.queryView("button"); //button object
For direct access to view instances, you can define the unique ID within view configuration:
webix.ui({
rows:[
{ view:"list", id:"order-list"},
{ view:"list", id:"data-list"}
]
});
Then, you can get the instances of this view with the help of the $$ method:
var list1 = $$("order-list"); // as a global one
var list2 = webix.$$("data-list"); // or, from webix namespace
If you don't specify the ID, it will be automatically generated with the "$component_name1" pattern for each instance of the component.
You can get the custom or auto-generated ID via component config that contains both default and custom settings:
Auto Generated ID
var list = webix.ui({
view:"list",
//other settings
});
var listId = list.config.id; // $list1, as an auto-generated ID
$$(listId).select(5);
Related sample: Auto-Generated ID
Still, avoid using auto IDs directly (like $$("$list1")). It is not safe as such IDs may change in case of a new instance of one and the same component added to the application.
Summing up:
There is a placeholder view among Webix components. It is called UI Spacer and can be used to create an empty area between other Webix views to align them in layout.
Spacer can be initialized just by two braces {}, providing view name is optional. If needed, you can specify width, height or gravity for it.
Aligning buttons on toolbar
webix.ui({
view:"toolbar", cols:[
{ view:"button", value:"but1"}, //left
{ },
{ view:"button", value:"but2"} //right
]
})
If you need to render a custom text or HTML within Webix layout, use the Template component:
{
view:"template", //optional
template:"<b>Hello<b>, world!"
}
Related sample: Default Template
You can also define rich item templates for data components like Datatable, List, Dataview, etc. Basic templating rules are described here.
Views can be placed into existing HTML elements. To do this, provide element ID as a value of a component's container property:
//body section
<div id="mylayout" style="width:600px;height:400px;"></div>
//script section
webix.ui({
view:"layout",
container:"mylayout",
rows:[ /*array of components*/ ]
});
This approach have the following limitations:
The methods are called from any view and are used to get its parent object:
webix.ui({
id:"mylayout", rows:[
{ view:"toolbar", id:"mybar", cols:[
{ view:"button", id:"mybutton" }
]},
{ template:"Text"}
]
});
var t = $$("mybutton").getParentView(); //toolbar object, "mybar"
var l = $$("mybutton").getTopParentView(); //layout object, "mylayout"
The method returns an instance of a parent form where the view is located. It's especially useful in case of complex forms:
webix.ui({
view:"form", id:"myform", elements:[
{ view:"text"},
{ cols:[
{ view:"checkbox", id:"mybox"}
]},
{ view:"combo", options:["one", "two"]}
]
});
$$("mybox").getFormView(); // form instance with "myform" ID
This method returns an array of all the children of the calling component (Layout, Multiview, Form, etc).
For instance, if you have a Toolbar within the Layout and the toolbar itself comes with three buttons, the function will return the following:
var bar = $$("mylayout").getChildViews()[0]; //toolbar instance
var but = $$("mybar").getChildViews()[1]; //instance of the 2nd button
Like the above mentioned one, this method works with views containing other views (Layout, Multiview, Form, etc).
It returns the index of a child view by its ID:
webix.ui({
view:"layout", //optional
id:"mylayout",
rows:[
{ id:"cell1", view:"list", ... },
{ id:"cell2", view:"form", ... },
{ id:"cell3", view:"dataview", ... }
]
});
$$("mylayout").index($$("cell1")); // 0
The method is used to search for specific views in layouts (Layout, Multiview, Form, etc.). You can provide the view name, settings or a function as a search criterion:
// returns the instances of all buttons in the toolbar
$$("mybar").queryView("button", "all");
The method helps us get an HTML element of the component.
webix.ui({
view:"toolbar", id:"mybar", elements: [/*buttons*/]
});
var box = $$("mybar").getNode();
Alternatively, you can get the view HTML by accessing the $view property of its instance:
var box = $$("mybar").$view; //do not modify it
The method can be used with form controls (e.g. Text) to get the HTML element of the input area.
webix.ui({
view:"button", id:"mybutton",
value:"Login", css:"webix_primary"
});
$$("mybutton").getInputNode();
See also the full list of View methods, parameters and events in the API Reference.
Back to top