Ext 4 Treepanel context menu not showing at target

[Hari1611]

Ext 4 treepanel context menu not showing at the target node.. My code is as below.. Please anybody help me to resolve it.

var onContextMenu = function (view, record, item, index, e) {
var selNode = record;
if (Ext4.getCmp("mainContext") != null) {
Ext4.getCmp("mainContext").destroy();
}
var menu = createContextMenu(selNode);
e.preventDefault();
menu.showAt(item);
}

var tree = Ext4.create('Ext4.tree.Panel', {
animate: true,
enableDD: true,
id: "filterTree",
border: false,
renderTo: self.containerId,
store: treeStore,
rootVisible: false,
layout: {
type: 'fit',
padding: '5',
align: 'left'
},
listeners: {
afterrender: function () {
this.getEl().setStyle('height', 'auto');
this.body.setStyle('height', 'auto');
this.getView().getEl().setStyle('height', 'auto');
}
}
});
tree.on('itemcontextmenu', onContextMenu);

Whats wrong with this code??

[skirtle]

Please use CODE tags when posting code (# button on the editor toolbar).

I believe the problem is with your showAt(). See the example here:

http://docs.sencha.com/ext-js/4-0/#!...-method-showAt

[Hari1611]

Works fine!
But i have to render the menu to the body on creation and specify the floating : false

I need to show the menu on the icon of the tree node, earlier with ext 3.0 it can be done with

menu.show(selectedNode.ui.getIconEl());

selectedNode.ui.getIconEl() is missing in Ext 4

How can i do it?? Any suggestion??

[skirtle]

But i have to render the menu to the body on creation and specify the floating : false

Why?

selectedNode.ui.getIconEl() is missing in Ext 4

Just do a suitable DomQuery down from the item (the third argument of your handler).

I also think you're going to need showBy() rather than show():

http://docs.sencha.com/ext-js/4-0/#!...-method-showBy

[Hari1611]

How can i get the icon element of each node in the tree??

If i didnt specify

floating:false

then menu will be shown like this

tree.JPG

Any idea why is it so?

[skirtle]

How can i get the icon element of each node in the tree??

As already mentioned, you need to use a DomQuery. It'd be something like this:

Ext.fly(item).down('.x-tree-icon')

As for the floating problem, it's difficult to guess what the problem is without seeing the config for your menu. Make sure you don't have a renderTo option.