Results 1 to 4 of 4

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

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Ext JS Premium Member
    Join Date
    Nov 2011
    Vote Rating

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

    Original post here:

    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
    • 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" "">
        <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();
            ExampleWindow = Ext.extend(Ext.Window, {
                panelCount: 1,
                initComponent: function() {
                    Ext.apply(this, {
                        height : 500,
                        width : 700,
                        layout: 'fit',
                        items: {
                                '<div>' +
                                    '<p>Editor will be rendered below</p>' +
                                    '<div id="comment-panel-wrap"></div>' +
                                    '<div id="my-output"></div>' +
                        buttons: [
                                text: 'Add/Replace Panel',
                                handler: this.addOrReplaceCommentPanel,
                                scope: this
                addOrReplaceCommentPanel: function() {
                    //if the reply comment panel appears elsewhere, get rid of it
                    if(this.replyCommentPanel) {
                        delete this.replyCommentPanel;
                    this.replyCommentPanel = new Ext.Container({
                        cls: 'j-comment-panel j-reply-comment-panel',
                        border: false,
                        height: 189,
                        items: [
                        renderTo: 'comment-panel-wrap'
                    //debug output
                    Ext.getDom('my-output').innerHTML += '<br />Editor ' + 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!';
    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:

      Ext.EventManager.on(doc, {
                      mousedown: fn,
                      dblclick: fn,
                      click: fn,
                      keyup: fn,

      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 ( however, I didn't see this issue in Ext's source code

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL
    Vote Rating


    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
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:

  3. #3
    Ext JS Premium Member
    Join Date
    Nov 2011
    Vote Rating


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

    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.

  4. #4
    Ext JS Premium Member
    Join Date
    Feb 2010
    Melbourne, Australia
    Vote Rating


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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts