qooxdoo

the new era of web development

 

How to implement a context-menu?

Implementing a context-menu is as easy as never before.

var container = new qx.ui.container.Composite(new qx.ui.layout.Canvas);
container.setPadding(20);
this.getRoot().add(container);

...

var list = new qx.ui.form.List;
list.setContextMenu(this.getContextMenu());
container.add(list);

...

getContextMenu : function()
{
   var menu = new qx.ui.menu.Menu;

   var cutButton = new qx.ui.menu.Button("Cut", "icon/16/actions/edit-cut.png", this._cutCommand);
   var copyButton = new qx.ui.menu.Button("Copy", "icon/16/actions/edit-copy.png", this._copyCommand);
   var pasteButton = new qx.ui.menu.Button("Paste", "icon/16/actions/edit-paste.png", this._pasteCommand);

   cutButton.addListener("execute", this.debugButton);
   copyButton.addListener("execute", this.debugButton);
   pasteButton.addListener("execute", this.debugButton);

   menu.add(cutButton);
   menu.add(copyButton);
   menu.add(pasteButton);

   return menu;
}

This little code snippet is taken from the online demo. Just right-click at the list.

Previous topic

How do I see HTML created by qooxdoo?

Next topic

Problems with “this” in event handlers

This Page