webix.ui({
view:"window",
id:"editwin",
head:"Edit.. ",
modal:true,
position:"center",
body:{
view:"form", id:"editform", elements:[
{ view:"text", label:"Title", name:"title"},
{ view:"text", label:"Year", name:"year"},
{ view:"text", label:"Votes", name:"votes"},
{ cols:[
{ view:"button", value:"Cancel", click:function(){
this.getTopParentView().hide();
}},
{ view:"button", type:"form", value:"Save", click:function(){
this.getFormView().save();
this.getTopParentView().hide();
}}
]}
]
}
});
webix.ui({
view:"datatable",id:"table",
columns:[
{ template:"<input class='editBtn' type='button' value='Edit'>", width:100 },
{ id:"rank", header:"", css:"rank", width:50},
{ id:"title", header:"Film title", width:200},
{ id:"year", header:"Released" , width:80},
{ id:"votes", header:"Votes", width:100}
],
autoheight:true,
autowidth:true,
select:true,
data: [
{ id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rating:9.2, rank:1},
{ id:2, title:"The Godfather", year:1972, votes:511495, rating:9.2, rank:2}
],
on:{
onClick:{
"editBtn":function(ev){
$$("editwin").show();
}
}
}
});
$$("editform").bind($$("table"));