Understanding View Concept

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

    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

        { view:"toolbar", cols:[ /*buttons*/ ]},
        { view:"dataview", data:list_data }

View Instance

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:

var rows = layout.getChildViews(); //array of objects
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

View ID

For direct access to view instances, you can define the unique ID within view configuration:

        { 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({
    //other settings
var listId = list.config.id; // $list1, as an auto-generated ID

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:

  • Providing view ID is optional. Once defined, it must be unigue to avoid errors.
  • View ID can be found in its object as view.config.id;
  • View IDs are reflected in HTML as a view_id attribute of a topmost div of a component;
  • Using auto-generated IDs directly is unsafe as they may change dynamically;

Empty Space

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

    view:"toolbar", cols:[
        { view:"button", value:"but1"}, //left
        { },
        { view:"button", value:"but2"}  //right

HTML in Views

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 in HTML

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
    rows:[ /*array of components*/ ]

This approach have the following limitations:

  • you can render only the topmost Webix view into the HTML element. Also, Webix views stick to the initial sizes
  • views in HTML stick to the initial dimensions and no longer respond to the changes of viewport size.

Basic View Methods

1 . getParentView() & getTopParentView()

The methods are called from any view and are used to get its parent object:

    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"

2 . getFormView()

The method returns an instance of a parent form where the view is located. It's especially useful in case of complex forms:

    view:"form", id:"myform", elements:[
        { view:"text"},
        { cols:[
            { view:"checkbox", id:"mybox"}
        { view:"combo", options:["one", "two"]}
$$("mybox").getFormView(); // form instance with "myform" ID

3 . getChildViews()

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

4 . index()

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:

    view:"layout", //optional
        { id:"cell1", view:"list", ... },
        { id:"cell2", view:"form", ... },
        { id:"cell3", view:"dataview", ... }
$$("mylayout").index($$("cell1")); // 0

5 . queryView()

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");

6 . getNode()

The method helps us get an HTML element of the component.

    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

7 . getInputNode()

The method can be used with form controls (e.g. Text) to get the HTML element of the input area.

  view:"button", id:"mybutton", 
  value:"Login", css:"webix_primary"

See also the full list of View methods, parameters and events in the API Reference.

Back to top