Right mouse clicks selects tree item and shows context popup

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

Right mouse clicks selects tree item and shows context popup

Werner Thie
Aloha all

just had a hair pulling and head scratching session lasting two hours,
lots of googling, lots of stuff not working out, here's the solution,
which seems to do the trick on qx-5.0:

var tree = new qx.ui.tree.VirtualTree(null, "name", "children").set({
   width : 250,
   padding: 0,
   backgroundColor: 'transparent'
});
tree.setDecorator(null);

//trepr contains some JSON string modelling the tree, coming from the
//server
"""
{"path": "../data", "name": "root", "children": [{"path": "../data",
"name": "item1"}, {"path": "../data", "name": "item2"}]}
"""
var model = qx.data.marshal.Json.createModel(JSON.parse(trepr), true);
tree.setModel(model);    // connect the store and the tree

//open the root node
tree.openNode(tree.getModel().getChildren().getItem(0));


//double click handler, show some getter results (model dependent)
function _onDblClickItem(e) {
   var item = e.getTarget();
   alert(item.getModel().getPath() + '/' + item.getModel().getName());
}

//right click handler
function _onContextMenu(e) {
   var item = e.getTarget();
   var selection = tree.getSelection();
   selection.setItem(0, item.getModel());

   var contextMenu = new qx.ui.menu.Menu();
   contextMenu.setMinWidth(120);
   var newButton = new qx.ui.menu.Button("New");
   var editButton = new qx.ui.menu.Button("Edit");

   contextMenu.add(editButton);
   contextMenu.add(newButton);

   contextMenu.openAtPointer(e);

   contextMenu.addListenerOnce("disappear", function(e) {
     contextMenu.getChildren().forEach(function(w) {
       w.dispose();
     });
     contextMenu.dispose();
   });
}

tree.setDelegate({
   bindItem : function (controller, item, id) {
     controller.bindDefaultProperties(item, id);
     item.addListener("dblclick", _onDblClickItem, this);
     item.addListener("contextmenu", _onContextMenu, this);
   },

   //removing the stuff we bound earlier on
   onPool : function(item) {
     item.removeListener("dblclick", _onDblClickItem, this);
     item.removeListener("contextmenu", _onContextMenu, this);
   }
});

Werner

------------------------------------------------------------------------------
Don't Limit Your Business. Reach for the Cloud.
GigeNET's Cloud Solutions provide you with the tools and support that
you need to offload your IT needs and focus on growing your business.
Configured For All Businesses. Start Your Cloud Today.
https://www.gigenetcloud.com/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel