Az egér jobb klikk lekezelése (a context menü előhívása) kifejezetten kényelmesen lett megvalósítva az ExtJS-ben, ám valamiért nem minden elemhez készítették el ezt alapértelmezetten. Nekem nagyon hiányzott a szimpla panel tartalmi részénél. Azaz, valami ilyesmire volt szükségem:
new Ext.Panel({
title:'Context Menu',
html:'Lorem ipsum....',
renderTo: Ext.getBody(),
listeners: {
bodycontextmenu: function(panel, e) {
var contextMenu = new Ext.menu.Menu({
items: [{
text: 'Hello',
handler: function() { Ext.Msg.alert('Szia!', 'Szerbusz világ!');}
}]
});
contextMenu.showAt(e.xy);
}
},
});
title:'Context Menu',
html:'Lorem ipsum....',
renderTo: Ext.getBody(),
listeners: {
bodycontextmenu: function(panel, e) {
var contextMenu = new Ext.menu.Menu({
items: [{
text: 'Hello',
handler: function() { Ext.Msg.alert('Szia!', 'Szerbusz világ!');}
}]
});
contextMenu.showAt(e.xy);
}
},
});
Az eredeti forrásfájlokba továbbra sem szeretnék belenyúlni, így szintén az Ext.override-dal írjuk a Ext.Panel egyes függvényeihez a hiányzó részeket:
Ext.override(Ext.Panel, {
initComponent: Ext.Panel.prototype.initComponent.createSequence( function() {
this.addEvents('bodycontextmenu', 'headercontextmenu');
}),
initEvents: Ext.Panel.prototype.initEvents.createSequence( function() {
if(this.body) this.body.on('contextmenu', this.onBodyContextMenu, this);
if(this.header) this.header.on('contextmenu', this.onHeaderContextMenu, this);
}),
onBodyContextMenu: function(e){
e.preventDefault();
this.fireEvent('bodycontextmenu', this, e);
},
onHeaderContextMenu: function(e){
e.preventDefault();
this.fireEvent('headercontextmenu', this, e);
}
});
initComponent: Ext.Panel.prototype.initComponent.createSequence( function() {
this.addEvents('bodycontextmenu', 'headercontextmenu');
}),
initEvents: Ext.Panel.prototype.initEvents.createSequence( function() {
if(this.body) this.body.on('contextmenu', this.onBodyContextMenu, this);
if(this.header) this.header.on('contextmenu', this.onHeaderContextMenu, this);
}),
onBodyContextMenu: function(e){
e.preventDefault();
this.fireEvent('bodycontextmenu', this, e);
},
onHeaderContextMenu: function(e){
e.preventDefault();
this.fireEvent('headercontextmenu', this, e);
}
});
Ezzel a kiegészítéssel már a fenti kód is a várt eredményt adja.
És, ha már itt voltunk, akkor a fejléc context menüjét is hozzáadtuk. Annyi megjegyzés még a végére, hogy az addEvents elhagyható lenne, de ahogy az ExtJS kódjában is minden típusnál minden eseményt hozzáadják, így én sem akartam ezt kihagyni.
