Here we create a simple filmset - a list of films, where you can add elements.
Here you will need:
First of all, you should create the app layout and then, place ui components and controls there.
Follow the guide step by step:
This is a clean page:
webix.ui({
});
Divide the page into two rows with the upper one being for toolbar. Set the width to the app - 500px.
webix.ui({
width:500,
rows: [
{ template:"Row 1" }, //1st row
{ template:"Row 2" } //2nd row
]
});
The layout doesn't show empty cells. That's why we temporary put templates into rows to force the layout to display the structure.
Divide the lower row into two columns for list and form components.
webix.ui({
width:500,
rows: [
{ template:"Row 1" },
{ cols:[
{ template:"Column 1" },//1st column
{ template:"Column 2" } //2nd column
]}
]
});
webix.ui({
width:500,
rows: [
{ view:"toolbar", elements:[
{ view:"button", value:"Add", width:100 },
{ view:"button", value:"Delete", width:100 }
]},
{ cols:[
{ template:"Column 1" },//1st column
{ template:"Column 2" } //2nd column
]}
]
});
Place a form into the first column. The form will contain two text inputs stored in the elements array.
webix.ui({
width:500,
rows: [
{ view:"toolbar", elements:[
{ view:"button", value:"Add", width:100},
{ view:"button", value:"Delete", width:100 }
]},
{ cols:[
{view:"form", elements:[
{ view:"text", placeholder:"Title"},
{ view:"text", placeholder:"Year"}
]},
{ template:"Column 2" } //2nd column
]}
]
});
webix.ui({
width:500,
rows: [
{ view:"toolbar", elements:[
{ view:"button", value:"Add", width:100},
{ view:"button", value:"Delete", width:100 }
]},
{ height:120, cols:[
{view:"form", elements:[
{ view:"text", placeholder:"Title"},
{ view:"text", placeholder:"Year"}
]},
{
view:"list",
template:"#title# - #year#", // which data to show
select:true, //enables selection
height:400,
data: [
{ id:1, title:"The Shawshank Redemption", year:1994},
{ id:2, title:"The Godfather", year:1972},
{ id:3, title:"The Godfather: Part II", year:1974},
{ id:4, title:"The Good, the Bad and the Ugly", year:1966},
{ id:5, title:"My Fair Lady", year:1964},
{ id:6, title:"12 Angry Men", year:1957}
]
}
]}
]
});
Related sample: Creating Basic App. Step 1
Go further:
Back to top