The apps are to be placed between the script tags. The components you create are initialized inside the view.
Just a clean page
webix.ui({
// components
});
Here you should be aware of the following:
webix.ready(function(){
webix.ui({
....
});
});
Next we'll declare base elements, create the app layout and finally nest it with UI components.
At this step we'll specify an HTML container for the app with the following properties:
<style>#app_here{
width:1000px; height:400px; margin:20px;
}
</style>
...
<div id="app_here"></div>
Then we'll create a layout structure which will be put into the above created container:
webix.ui({
container:"app_here",
view:"layout", // optional
rows:[
{...},
{ view:"layout", // optional
cols:[
{...},
{...},
{...}
]}
]
});
As the value of the container property the id of HTML element should be specified.
Note that you can easily omit the view:"layout" lines and start setting rows and columns at once.
Now we can insert some components into the layout view.
We'll put a template that will serve as the application's header into the first row.
webix.ui({
container:"app_here",
rows:[
{ view:"template", type:"header", template:"My App!"},
{ cols:[
{...},
{...},
{...}
]}
]
});
It's high time to place components into the second row. The 3 columns of the second row will be occupied by Tree and DataTable components and a resizer line between them:
webix.ui({
container:"app_here",
rows:[
{ type:"header", template:"My App!" },
{ cols:[
{ view:"tree", id:"mytree", gravity:0.3, select:true, data:tree_data },
{ view:"resizer" },
{ view:"datatable", id:"mydatatable", autoConfig:true, data:small_film_set}
]}
]
});
Let's look at the above code in detail:
We use JSON in the sample, so the items of the tree_data dataset look like this:
[
{ id: "1", type: "folder", value: "Music",
css:"folder_music", data:[..child items..]},
...
]
The grid_data dataset includes data items in the next mode:
[
{ id:1, title:"The Shawshank Redemption", year:1994,
votes:678790, rating:9.2, rank:1},
...
]
At the last step we'll illustrate the usage of ids. In order to refer to a component the following structure should be used - $$("id").
We will use the Tree method open to open the tree branches and the DataTable method select to select the first item of the datatable.
webix.ui({
container:"app_here",
rows:[
{ type:"header", template:"My App!" },
{ cols:[
{ view:"tree", id:"mytree", gravity:0.3, select:true, data:tree_data },
{ view:"resizer" },
{ view:"datatable", id:"mydatatable", autoConfig:true, data:grid_data }
]}
]
});
$$("mytree").open(1);
$$("mytree").open(2);
$$("mydatatable").select(1);
The ready app is presented in the following picture:
You can check the live demo and play with code by the following link https://snippet.webix.com/eadf0190
See also:
Back to top