PDA

View Full Version : how to create context menu for draw component



tsuryap
26 Sep 2012, 4:56 AM
i had created a rectangle using draw component how to add context menu to the rectangle please help me

sword-it
26 Sep 2012, 6:02 AM
Hi,

You can achieve contextmenu on draw component by add mousedown event and check which side click by mouse like
e.button == 0 for left click
e.button == 1 for middle click
e.button == 2 for right click


var drawComponent = Ext.create('Ext.draw.Component', {
viewBox: false,
listeners:{
mousedown:function(e, eOpts){
if(e.button == '2'){ // test for rightside click if button == 2
var contextMenu= new Ext.menu.Menu({
items: [
{
text:'Save'
},
{
text:'New'
},
{
text:'update'
}
]
});
contextMenu.showAt(e.xy);
}
}
},
items: [{
type: 'circle',
fill: '#79BB3F',
radius: 100,
x: 100,
y: 100
}]
});

Ext.create('Ext.Window', {
width: 215,
height: 235,
layout: 'fit',
items: [drawComponent]
}).show();

See working example here -http://jsfiddle.net/maneeshgo/n4V5W/