PDA

View Full Version : Ext Events and HTMLEditor contextmenu


knight9
9 Jan 2008, 8:09 AM
I am trying to extend the HTMLEditor to handle contextmenu events, but can not figure out how to use the ext eventmanager. I had to manually add an event to an underlying iframe in the htmleditor, so i get a browser event in the callback instead of an ext event. Is there a simple method of converting a browser event to an ext event.

I would like to have something like this

Ext.namespace('Ext.ux');

// Ext.ux.HTMLEditor
// extends Ext.form.HtmlEditor to provide context menu event
Ext.ux.HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {

//Custom function to override addListener for contextmenu event
addListener: function(eventName, handler, scope, options){
if(eventName == "contextmenu"){
if (Ext.isIE) {
Ext.get(this.iframe.id).dom.contentWindow.document.attachEvent('oncontextmenu', handler, false);
}
else{ //Not IE firefox
Ext.get(this.iframe.id).dom.contentDocument.body.addEventListener('contextmenu', handler, true);
}
}
else{ //Else we just pass through to standard addListener
Ext.ux.HTMLEditor.superclass.addListener.call(eventName,handler,scope,options);
}
}
}

);

This does work to call catch the event, however when the handler is called it is passed a Browser Event and I would really prefer to pass it an Ext Event in order to get all the Ext functionality and cross browser compatibility. I cant find enough documentation on the EventManager to figure out how to add this custom contextmenu event to it.

This is related to another post regarding adding context menu to htmleditor here
http://extjs.com/forum/showthread.php?t=21288
I am just trying to create a clean implementation to post back for everyone to use.

Maybe I am going about this the wrong way. Any hints or suggestions would be greatly appreciated.
knight9
9 Jan 2008, 8:31 AM
Ok, sorry I think I figured this part out.. I was able to add to the eventmanger object as below. There are few issues to work out.
1. In Firefox, the contextmenu disappears immediatly after it is redered
2. In IE, the context menu does not ALWAYS show up when right clicking
3. In IE, SOMETIMES the context menu will disappear immediatly after it is displayed.

Any suggestions on how to resolve those would be appreciated.

htmleditor_1.js

Ext.namespace('Ext.ux');

// Ext.ux.HTMLEditor
// extends Ext.form.HtmlEditor to provide context menu event
Ext.ux.HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {
//Custom function to add a context menu, DOES NOT use EXT events
addListener: function(eventName, handler, scope, options){
if(eventName == "contextmenu"){
if (Ext.isIE) {
Ext.EventManager.addListener(this.doc,'contextmenu', handler, scope|| this,options);
}
else{ //Not IE firefox
Ext.EventManager.addListener(this.doc,'contextmenu', handler, scope|| this,options);

}
}
else{ //Else we just pass through to standard addListener
Ext.ux.HTMLEditor.superclass.addListener.call(eventName, handler, scope|| this, options);
}
}
}

);


This creates a new extension to htmleditor. Here is an example page of how to use it. Note that we create a new Ext.ux.HTMLEditor instead of Ext.form.HtmlEditor to use the extended functionality.
index.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ext.ux.HTMLEditor Context Menu Example</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
<style type="text/css">
body {
font-family: verdana, tahoma, helvetica;
padding: 20px;
font-size: 13px;
}
p {
margin-bottom: 15px;
}
h1 {
font-size: large;
margin-bottom: 20px;
}
</style>
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="htmleditor_1.js"></script>
<script type="text/javascript">
//Create a context menu to popup
var contextMenu = new Ext.menu.Menu({
id:'context_menu',
items:[
{
id:'context_menu_new',
text:'Test Item'
}
]});
//handler for the context menu
var myHandler = function(e){
e.stopEvent();
//contextMenuTarget = e.getTarget();
contextMenu.showAt(e.getXY());
}

Ext.onReady(function() {
Ext.QuickTips.init();
//create the editor
var editor = new Ext.ux.HTMLEditor({
width: 600,
height: 300,
autoheight: true,
el: 'htmleditor'
});
editor.render();
editor.addListener('contextmenu',myHandler);
});
</script>
</head>
<body>
<h1>Improved HtmlEditor Context Menu</h1>
<p>This extended version of the HtmlEditor provides a way to add a contextmenu event to the editor</p>
<textarea id="htmleditor">
View the source to see how to implement this.
</textarea>
</body>
</html>
ortizSWF
9 Jan 2008, 2:13 PM
hi knight9, Im totaly agree doing the extension in that way

but I still having the same problems than you

anyone can help us?

Regards....~o)
knight9
9 Jan 2008, 2:37 PM
I figured out as best as I can. The following extension works very well with firefox, but still occasional glitches with context menu in IE. My main user base is IE so any help in resolving the odd behavior on IE would be greatly appreciated..

I had to add two eventhandlers to get this to work right in firefox. The first handler stops the default contextmenu from showing up and does nothing else. The second handler is buffered(i.e. delayed) 100ms in order to allow an additional click event generated by firefox to fire before displaying the context menu. Normally the click event would cause the context menu to disappear. I think using a delay is a very hacky way to handle this, but it seems to function. I could not figure out how to simply ignore a single click event in the eventmanager, so this is the best I could do.

As I said I would really appreciate any ideas on the flaky behavior in IE.

Also I am not sure why, but other events added (click, mouseover, etc) do not seem to be passing through my overridden function properly. I just called the superclass addListener with the same arguments, but I get an error about not being able to lowercase the eventname.

Here is the extension code

Ext.namespace('Ext.ux');

// Ext.ux.HTMLEditor
// extends Ext.form.HtmlEditor to provide context menu event
Ext.ux.HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {

addListener: function(eventName, handler, scope, options){
if(eventName == "contextmenu"){
//This is a dummy f
var stopDefault = function(e){
e.stopEvent();
e.stopPropagation();
}
if(Ext.isIE){
//buffer doesnt work in IE for some reason, but IE doesnt need to delay the context menu
Ext.EventManager.addListener(this.doc,'contextmenu', handler, scope|| this,{stopEvent:true, stopPropagation:true, preventDefault:true});
}else{
//first event stops the default menu immediatly
Ext.EventManager.addListener(this.doc,'contextmenu', stopDefault, scope|| this,{stopEvent:true, stopPropagation:true, preventDefault:true});
//buffer the contextmenu handler such that subsequent click event generated from FF doesnt clear context menu
Ext.EventManager.addListener(this.doc,'contextmenu', handler, scope|| this,{stopEvent:true, stopPropagation:true, preventDefault:true, buffer: 100});
}
}
else{ //Else we just pass through to standard addListener
Ext.ux.HTMLEditor.superclass.addListener.call(eventName, handler, scope|| this, options);
}
}
});
jukkajurvansuu
8 May 2009, 4:45 AM
Is this extension supposed to work with ExtJS 2.2? For some reason the contextmenu event does not fire even when I copy paste your code.

Or are there any alternative extensions for creating contextmenu for HtmlEditor nowdays, because this thread is a bit old now.
jukkajurvansuu
18 May 2009, 11:18 PM
I made some changes for knight9 code and posted a working example here: http://extjs.com/forum/showthread.php?p=330366#post330366

Seems to work very well in Internet Explorer and FF. No more flicking contextmenu in IE.