Contextmenu is triggered by right mouseclick. Ui-related Contextmenu inherits from both window and list. It looks like ui-related menu and shares most of its properties, methods and events.
1 . ContextMenu - List
webix.ui({
view:"contextmenu",
id:"my_menu",
data:[
"Add",
"Rename",
"Delete",
{ $template:"Separator" }
,"Info"
],
master:"areaA" // ID of a DIV container
});
Data property includes list items in the window, separator stands for a line to divide window areas while master property defines the area where the component is initialized.
2 . ContextMenu - Menu
webix.ui({
view:"contextmenu",
id:"my_menu",
data:[
{ value:"Translate...", submenu:[
"English", "Slavic...", "German"
]},
{ ...},
{ ... }
]
master:"areaB"
});
Here data includes menu constructor with some items having submenus.
You can access any element of a contextmenu and its submenus and attach events to them with the help of the following patterns:
//for list contextmenu
$$("my_menu").attachEvent("onItemClick":function(id){
webix.message(this.getItem(id).value);
});
//for "menu-like" contextmenu
$$("my_menu").attachEvent("onItemClick", function(id){
var menu = this.getSubMenu(id);
webix.message("Click: "+menu.getItem(id).value);
})
A contextmenu can be initialized for any Webix component. A three-step process includes the following stages:
1) Firstly, you should include an onContext property into the component's construction:
webix.ui({
view:"list",
id:"list",
//list config
onContext:{} // the empty object
});
2) Secondly, you initialize a contextmenu in a separate within a separate webix.ui function:
webix.ui({
view:"contextmenu",
data:[....],
...
});
3) Thirdly, you link the contextmenu to the necessary component with the help of either
$$('contextmenu1').attachTo($$('list'));
Related sample: Context Menu: Attaching to List
webix.ui({
view:"contextmenu",
data:[....],
master:$$("list")
});
Note You can link either to a component object or to its HTML container (like any other HTML on page). The difference lies within data components - to attach context menu to their items, you need to link to a component object.
A component HTML container is stored in its $view specific property:
$$("list").$view; //returns <div class="webix_view webix_list" ...></div>
Attaching contextmenu to list
//works with list items
$$('contextmenu1').attachTo($$('list1'));
//works with the whole list
$$('contextmenu1').attachTo($$('list1').$view);
It is the nice option to attach contentmenu to Webix controls, e.g. button or any HTML elements on the page:
$$('contextmenu1').attachTo($$('button1').$view);
$$('contextmenu1').attachTo(document.getElementById("myElement"));
Like with context, the area upon which the context menu is called master area or (if you call it over a component or its item), master component.
Master component object is retrieved with the getContext() property.
webix.ui({
view:"contextmenu"
on:{
onItemClick:function(id){
var context = this.getContext();
var list = context.obj; //list item objetc
var listId = context.id; //id of teh clicked list item
webix.message("List item: <i>"+list.getItem(listId).title+"</i> <br/>
Context menu item: <i>"+this.getItem(id).value+"</i>");
Related sample: Context Menu: Attaching to List