According to default Webix pattern, applications are made by putting pre-built meaningful components (like grid, tree, controls) into layouts. The areas with extra interactivity can be added to Webix components in two ways:
Clickable (or in some other way 'active') areas inside components are defined through HTML templates and CSS classes. More on data templates.
Related sample: List: Event Handlers
In the list above the task is solved in the following way:
CSS for active element
.info{
width:100px;
text-align: center;
font-weight:bold;
float:right;
background-color:#444;
color:white;
border-radius:3px;
}
List config with active span element
webix.ui({
view:"list",
template:"#votes# <span class='info'>Details</span>",
select:true,
onClick:{
info:function(e, id){
webix.message(this.getItem(id).title);
return false;
}
}
});
ActiveContent module lets developers get rid of drawing interactive elements themselves and makes it possible to use existing Webix controls for it. In other words it allows for inserting one Webix view into another. (Normally, it goes only for layouts).
Related sample: List: Active Content
First of all the ActiveContent module should be added to the needed component by extending its default functionality:
webix.protoUI({
name:"activeList" //give it some name you like
},webix.ui.list, webix.ActiveContent);
Now, you can use it. Note that the name of the newly created component is used as view property value:
webix.ui({
view: "activeList",
id:"mylist",
activeContent:{
deleteButton:{
id:"deleteButtonId",
view:"button",
label:"Delete",
width:120
},
markCheckbox:{
view:"checkbox", ...
}
},
template: "#title#<div>{common.markCheckbox()}{common.deleteButton()}</div>"
});
"Active" template can be also defined via a function:
view:"activelist",
template: function (obj, common) {
return obj.title+"<div>"+common.deleteButton(obj, common)+"</div>";
}
If an active content element can have a variable value (like text field, or checkbox) it can be passed to it within data item properties:
Value for 'markCheckbox' active element
view:"activeList",
data:[
{ id:5, title:"My Fair Lady", year:1964, rank:5, markCheckbox:1}
]
Click and other events are attached to the buttons according to Webix Event handling pattern:
view:"button", click:function(){...}
//or
button.attachEvent("onItemClick", function(){...});
$$('deleteButtonId').attachEvent("onItemClick", function(id, e){
var item_id = $$('mylist').locate(e);
//returns id of a list item
});
on:{
'onChange':function(newv, oldv){
var item_id = this.config.$masterId;
}
}
Datatable and treetable specificity
With datatable and treetable you can get a row object by $master property that includes:
on:{
'onChange':function(newv, oldv){
var item_id = this.config.$masterId.row;
}
}