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