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
    Posts
    35
    Vote Rating
    1
    JamaSoftware-Sencha is on a distinguished road

      0  

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

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


    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member
    Join Date
    Nov 2011
    Posts
    35
    Vote Rating
    1
    JamaSoftware-Sencha is on a distinguished road

      0  

    Default


    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.

  4. #4
    Ext JS Premium Member
    Join Date
    Feb 2010
    Location
    Melbourne, Australia
    Posts
    9
    Vote Rating
    0
    markmansour is on a distinguished road

      0  

    Default


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