Documentation

Start Coding with Webix

Before you proceed to the main principles of Webix, make sure that you know how to:

• Install Webix sources and prepare the workspace
• Debug Webix code

And do not forget about the Interactive Tutorials that cover practical steps for mastering Webix.

Components

Webix includes over 100 widgets aka views:

• UI components like Datatable, Chart, List. etc.
• UI controls like inputs, buttons, combo boxes.
• Complex Solutions (PRO edition)
• UI extensions to integrate third-party tools into Webix apps

All of them inherit from base View and can be created by providing JSON configuration within webix.ui function:

var table = webix.ui({
  view:"datatable",
  data:grid_data,
  autoConfig:true
});

Related sample:  Basic Layout

There are also view-less Data and Tree Collections for storing and manipulating data on the client-side:

var records = new webix.DataCollection({
    url:"some/records"
});
 
table.sync(records); //share the same records to Datatable

Related sample:  Data Syncing: Collections and Widgets

Creating Views

To create a component on the page, provide its name and other necessary settings as a JSON object:

webix.ui({
    view:"list", // specifies the component name you want to create
    id:"mylist", // id, optional, unique
    //other parameters
});

View Instances

Once the component is created, you can get its instance by passing its ID to the $$ method:

var list = $$("mylist");
//or, from webix namespace
var list = webix.$$("mylist");

If you need to access the instance of the topmost view, you can get it as a webix.ui return value:

var list = webix.ui({ view:"list" });

From view instance you can call component methods, read settings, listen to events, e.g:

//forces repainting
list.refresh();

Combining views

Webix offers several layout types to arrange components:

• vertically or horizontally thus forming an abstract grid;
• expandable and collapsible panels;
• in a group of cells, where only one can be visible at the moment;

It is recommended to describe UI parts in variables and combine them into a single JSON structure initialized by a single webix.ui call:

Vertical layout

var simple_config1 = {..};
var simple_config2 = {..};
var simple_config3 = {..};
 
webix.ui({
    rows:[
        simple_config1,
        simple_config2,
        simple_config3,
    ]
})

Note that Windows and Popup lie above layout, so you will need to use separate webix.ui calls for them.

View Containers

Webix views are rendered in the document body, unless an existing HTML element is specified as a container for it.

To achieve this, create and set IDs to a div element and provide this ID as the value of the component's container.

<body>
    <div id="dataA" style="width:500px;height:150px;"></div> 
    <script>
        webix.ui({
            view:"dataview",
            container:"dataA",
            //other settings
        });
    </script>         
</body>

However, there are some limitations regarding HTML containers for Webix views:

• only the topmost view in layout can be rendered in an HTML element, nested elements will form their own markup;
• views within containers stick to the initial dimensions and cannot adjust to the changing size of the viewport.

So, if you develop a single-page application with Webix, avoid putting it into an HTML container to preserve responsiveness.

View API

Each component has its own set of methods, properties and events that can be shared or specific ones:

• properties - configuration settings, including view name, width, height. They define the component appearance and behavior.

{ view:"list", id:"mylist", width:200, data:list_data }

• methods - actions available for this component, called from view instance.

$$("mylist").select(1); //selects the record which ID equals 1

• events - markers of inner actions. They are emitted by view instances during their lifecycle and can be handled:

$$("mylist").attachEvent("onAfterSelect", function(id){
    console.log(id); // outputs ID of selected record
});

All available API per component is located in the API reference section of the documentation.

Helpers

Apart from view layer, Webix offers helpers for:

• Ajax interface for issuing requests to server
• Date operations and formatting
• Localization
• Cross-browser DOM helpers

SPA Development

In case of a really big app with lots of components, controls and functions, consider Webix Jet, the proprietary MV framework that can help you organize your Webix code wisely and efficiently. It offers:

• view and logic separation;
• client-side data models;
• plugins for common tasks like localization, sessions and navigation.

Using Webix Jet is not necessary, you can still develop with pure Webix, but you will need to think of the app structure yourself.

Back to top