Ext 4 Treepanel context menu not showing at target

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??

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

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

Code:

---

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

---

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

How can i do it?? Any suggestion??

Quote:

---

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

---

Why?

Quote:

---

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

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

If i didnt specify

Code:

---

floating:false

---

then menu will be shown like this

Attachment 28654

Any idea why is it so?

Quote:

---

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:

Code:

---

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.

Code:

---

var menu = Ext4.create('Ext4.menu.Menu', {
            id: 'mainContext',
          floating: false,
            renderTo: Ext4.getBody(),
            width: 100,
            items: [{ text: 'Create Group',
                hidden: selNode.isLeaf() ? true : false,
                id: 'createGroup',
                handler: function () {
                   
            },
            {
                hidden: selNode.isLeaf() ? true : false,
                text: 'Rename Group',
                id: 'editGroup',
                handler: function () {
                 
            },
            {
                hidden: selNode.isLeaf() || selNode.raw.isGroup == 2 ? true : false,
                text: 'Delete Group',
                id: 'deleteGroup',
                handler: function () {
                   
                }
            },
            {
                text: 'Create Filter',
                id: 'createFilter',
                handler: function () {
                 
                }
            },
            {
                hidden: selNode.isLeaf() ? false : true,
                text: 'Edit Filter',
                id: 'editFilter',
                handler: function () {
               
                }
            },
            {
                hidden: selNode.isLeaf() ? false : true,
                text: 'Delete Filter',
                id: 'deleteFilter',
                handler: function () {
                   
                }
            },
            {
                hidden: selNode.raw.isGroup == 2 ? false : true,
                text: 'Cancel filter',
                id: 'cancelFilter',
                handler: function () {
                 
                }
            },
            {
                hidden: selNode.raw.isGroup == 2 ? false : true,
                text: 'Refresh Tree',
                id: 'refreshTree',
                handler: getData
            }]
        });

---

When the highlighted code is removed the menu is not showing any where..

In between im using ext 4 sandbox for creating the tree..