Ext.form.HtmlEditor breaks in IE9 after creating and destroying twice

**JamaSoftware-Sencha** · 5 Jan 2012 5:29 PM

Original post here: http://www.sencha.com/forum/showthre...344#post708344

Ext version tested:

Ext 3.4.0

Adapter used:

ext

css used:

ext-all.css with grey theme

Browser versions tested against:

FF 8
Chrome 16
IE9
IE8
IE7

Operating System:

Windows 7
Mac OS 10.7

Description:

I'm seeing an issue in IE9 (only) where destroying an Ext.form.HtmlEditor a twice is causing it to fail to initialize on all subsequent creations of the editor.

Test Case:

Load this example, and press the "Add/Replace Panel" button a few times.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">
<html>
<head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Test Html Editor IE9 Bug</title>
    
    <link rel="stylesheet" type="text/css" href="/js/ext/resources/css/ext-all.css"/>
    <link rel="stylesheet" type="text/css" href="/js/ext/resources/css/xtheme-gray.css"/>
    <script type="text/javascript" src="/js/ext/adapter/ext/ext-base-debug.js"></script>
    <script type="text/javascript" src="/js/ext/ext-all-debug-w-comments.js"></script>
    
    
    <script type="text/javascript">
    
        Ext.onReady(function() {
            var w = new ExampleWindow();
            w.show();
        });
        
        ExampleWindow = Ext.extend(Ext.Window, {
            
            panelCount: 1,
            
            initComponent: function() {
                Ext.apply(this, {
                    height : 500,
                    width : 700,
                    layout: 'fit',
                    items: {
                        html:
                            '<div>' +
                                '<p>Editor will be rendered below</p>' +
                                '<div id="comment-panel-wrap"></div>' +
                                '<div id="my-output"></div>' +
                            '</div>'
                    },
                    buttons: [
                        {
                            text: 'Add/Replace Panel',
                            handler: this.addOrReplaceCommentPanel,
                            scope: this
                        }
                    ]
                });
                ExampleWindow.superclass.initComponent.call(this);
            },
            
            addOrReplaceCommentPanel: function() {
                //if the reply comment panel appears elsewhere, get rid of it
                if(this.replyCommentPanel) {
                    Ext.destroy(this.replyCommentPanel);
                    delete this.replyCommentPanel;
                }
    
                this.replyCommentPanel = new Ext.Container({
                    cls: 'j-comment-panel j-reply-comment-panel',
                    border: false,
                    height: 189,
                    items: [
                        this.createReplyCommentText()
                    ],
                    renderTo: 'comment-panel-wrap'
                });
                
                //debug output
                Ext.getDom('my-output').innerHTML += '<br />Editor ' + this.panelCount + '... ';
                this.panelCount++;
            },
            
    
            createReplyCommentText: function() {
                this.replyCommentText = new Ext.form.HtmlEditor({
                    height: 150,
                    width: 250,
                    hideLabel: true,
                    enableAlignments: false,
                    enableColors: false,
                    enableFont: false,
                    enableFontSize: false,
                    enableSourceEdit: false,
                    allowBlank: false,
                    invalidText: 'You must enter a comment before you can submit',
                    validateOnBlur: false,
                    disabled: false,
                    listeners: {
                        initialize: this.onEditorInit
                    }
                });
    
                return this.replyCommentText;
            },
            
            onEditorInit: function(component) {
                component.focus(false, 1000);
                
                //debug output
                Ext.getDom('my-output').innerHTML += ' initialized!';
            }
            
        });
        
    </script>
    
</head>
<body>
    
</body>
</html>

Steps to reproduce the problem:

In IE9, create and Ext.form.HtmlEditor twice in sequence
Now create a third editor
Never initializes (you can verify with an "initialized" event listener)

The result that was expected:

"initialized" event would be fired upon initialization, like normal

The result that occurs instead:

No initialization event is fired

Debugging already done:

What I'm seeing happen is that there is an exception in the initEditor function in Ext.form.HtmlEditor. Specifically, this:
Code:
```
Ext.EventManager.on(doc, {
                mousedown: fn,
                dblclick: fn,
                click: fn,
                keyup: fn,
                buffer:100
            });
```
This call is throwing an exception "Permission Denied" (Error code is -2146828218), which is being swallowed in this function, and the editor never becomes initialized.

The confusing part about swallowing this exception is that everything still appears to work correctly, but when you call getValue(), you don't get anything since in syncValue(), it checks if the editor is initialized before copying the value into the hidden textarea.

A couple other details I've gathered:
- This issue doesn't appear in IE7 or IE8
- This issue also goes away in Quicks Mode
- This is most likely related to changing the design mode and still holding a reference to the old document (http://technet.microsoft.com/en-us/l...9(WS.10).aspx)... however, I didn't see this issue in Ext's source code

**mitchellsimoens** · 6 Jan 2012 9:28 AM

This looks to be fixed in Ext JS 4. If you need a fix for you application, you will need to open a ticket at support.sencha.com

**JamaSoftware-Sencha** · 20 Jan 2012 2:28 PM

I discovered the fix for this issue for 3.x. Put this in an overrides file somewhere in your app:

Code:

Ext.form.HtmlEditor.prototype.initEditor = Ext.util.Functions.createSequence(Ext.form.HtmlEditor.prototype.initEditor,
function() {
Ext.EventManager.on(window, 'unload', this.beforeDestroy, this);
}
);

Since the issue was fixed in Ext4, I did a diff between the two versions of the class until I could find out what was making one work and the other not.

**markmansour** · 31 Oct 2012 7:17 PM

Thanks JavaSoftware-Sencha, you override saved me a heap of pain.

Ext.form.HtmlEditor breaks in IE9 after creating and destroying twice

Thread Tools

Search Thread

Display

Ext.form.HtmlEditor breaks in IE9 after creating and destroying twice

Ext.form.HtmlEditor breaks in IE9 after creating and destroying twice

Tags for this Thread