This mixin will be removed in Webix 7.0. Instead, use HTML-templates for simple controls and DataLayout for more complex views.
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; // blocks the default click behavior
}
}
});
Note that returning false from the onClick handler blocks all further click-related events: onBeforeSelect, onAfterSelect, onSelectChange, onItemClick. To check the full stack of the blocked events, you should enable the debug version of the Webix library.
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 inserting controls into views. (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
},
editButton:{
id:"editButtonId",
view:"button",
label:"Edit",
width:80
},
markCheckbox:{
view:"checkbox",
...
}
},
template: "<div class='rank'>#rank#.</div>"+
"<div class='title'>#title#<br>#year# year</div>"+
"<div class='buttons'>{common.deleteButton()}</div>"+
"<div class='buttons'>{common.editButton()}</div>"+
"<div class='checkbox'>{common.markCheckbox()}</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 $masterId property that includes:
on:{
'onChange':function(newv, oldv){
var item_id = this.config.$masterId.row;
}
}