PDA

View Full Version : Context Menu in treeGrid



CrazyHob
27 Dec 2010, 4:42 AM
Hello here.
I'm using tree grid to show some data here comes the code:


var treeGrid = new Ext.ux.tree.TreeGrid({
title: 'Core Team Projects',
height: 400,
width: 800,
renderTo: Ext.getBody(),
columns:[{
header: 'Task',
dataIndex: 'name',
width: 230
},{
header: 'Description',
width: 450,
dataIndex: 'description'
}],
listeners:{
contextmenu:function(node, eventObj){
eventObj.stopEvent();
console.log('ContextMenu');
console.log(node.id);
console.log(this);
var ctxMenu = new Ext.menu.Menu({
items : [{
text : "This is"
},{
text : "our custom"
},{
text : "context menu"
}]
});
ctxMenu.showAt(250,250);
},
rowcontextmenu:function(){
console.log('rowcontextmenu')
}
},

//dataUrl: 'gettaskgrouptree.action'
dataUrl: 'dummyData.json'
});


Here comes dummy data:


[{
"children":[],
"cls":"master-task",
"description":"SOme dummy dsicription jus tot sort things out",
"iconCls":"task-folder",
"id":29875,
"leaf":true,
"name":"Some test gourp num 3"},
{
"children":[],
"cls":"master-task",
"description":null,
"iconCls":"task-folder",
"id":29835,
"leaf":true,
"name":"Some Test Group 2"},
{
"children":[],
"cls":"master-task",
"description":null,
"iconCls":"task-folder",
"id":29834,
"leaf":true,
"name":"Test Group"
}]

when i'm right clicking on the node I'm getting logs in console... with exact and correct id's - but Menue isn't showing.

So finally the question: what's wrong here?

Condor
27 Dec 2010, 5:00 AM
1. Shouldn't you be showing the context menu at the clicked location ("eventObj.getXY()") or aligned to the node?

2. Don't create a menu for every mouse click! Create a single menu and only show it when clicked.

CrazyHob
27 Dec 2010, 5:40 AM
O.k. now I modified my code this way:



var someMenu = new Ext.menu.Menu({
items : [{
text : "This is"
},{
text : "our custom"
},{
text : "context menu"
}]
});
var treeGrid = new Ext.ux.tree.TreeGrid({
title: 'Core Team Projects',
height: 400,
width: 800,
renderTo: Ext.getBody(),
columns:[{
header: 'Task',
dataIndex: 'name',
width: 230
},{
header: 'Description',
width: 450,
dataIndex: 'description'
}],
listeners:{
contextmenu:function(node, eventObj){
eventObj.stopEvent();
console.log('ContextMenu');
console.log(node.id);
console.log(this);

someMenu.show(eventObj.getXY());
},
rowcontextmenu:function(){
console.log('rowcontextmenu')
}
},

//dataUrl: 'gettaskgrouptree.action'
dataUrl: 'dummyData.json'
});

and i'm getting error : uncaught exception: Element.alignToXY with an element that doesn't exist
even though someMenu is not null and eventObj.getXY() is fine as well.

when i'm trying to use node instead of eventObj.getXY() i'm getting the same error message...
So the problem seems to be in someMenu initialization...

P.S. But really thx for your fast answer. I forgot about eventObj.getXY() and it helped me with another problem :)

Condor
27 Dec 2010, 6:02 AM
It's:

someMenu.showAt(eventObj.getXY());
or

someMenu.show(node.getUI().wrap);

CrazyHob
27 Dec 2010, 6:06 AM
Cool.. that works...

Have a loooong way to go >_<.

THX for you guidance Condor.