You found a bug! We've classified it as EXTJS-7655 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Mar 2012
    Location
    Austin, Texas
    Posts
    4
    Vote Rating
    0
    Jotnar is on a distinguished road

      0  

    Default [4.1.1] IE7 memory leak after adding combobox to htmleditor toolbar

    [4.1.1] IE7 memory leak after adding combobox to htmleditor toolbar


    This is my second attempt at reporting this. The first post was deleted with no explanation.
    MODS: if there is a problem with the format or content please let me know and I will correct it.


    REQUIRED INFORMATION


    Ext version tested:
    • Ext 4.1.1
    Browser versions tested against:
    • IE7
    • IE8
    • IE9
    Description:
    • Adding a combo box to the toolbar of Ext.form.HtmlEditor causes a large memory leak in IE7 on page unload. This memory is not garbage collected and never goes away. It will continue to rise about 30MB each time the component is unloaded. This does not appear to be an issue in IE8 or IE9. I have not tested it on IE6.
    Steps to reproduce the problem:
    • See test case below.
    The result that was expected:
    • Memory should return to pre page load level after navigating away from page.
    The result that occurs instead:
    • Memory increases about 30MB each time page is unloaded.
    Test Case:

    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    
    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-4.1.1-gpl/resources/css/ext-all.css">
    <script src="http://extjs.cachefly.net/ext-4.1.1-gpl/ext-all-debug.js"></script>
    
    
    <script type="text/javascript">  
    Ext.onReady(function() {
        Ext.define('CustomEditor', {
            extend : 'Ext.form.HtmlEditor',
            initComponent : function() {
                this.callParent(arguments);
                
                var toolbar = this.getToolbar();
                toolbar.add('->', 'Label:'
                    // Comment out the combo, and no memory leak!
                    ,{
                        xtype : 'combo',
                        width : 100
                    }
                );
            }
        });
        
        Ext.create('CustomEditor', {
            width : 700,
            height : 250,
            renderTo : 'editDiv'
        });
    });
    </script>
    </head>
    <body>
        <div id="editDiv">&nbsp;</div>
    </body>
    </html>


    HELPFUL INFORMATION

    Debugging already done:
    • Comment out the combo box in the code above and there won't be a leak.
    Possible fix:
    • not provided
    Additional CSS used:
    • only default ext-all.css
    Operating System:
    • WinXP Pro (IE7/8)
    • Win7 (IE9)

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,754
    Vote Rating
    827
    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


    I'm not seeing this. In beforeDestroy it does Ext.destroyMembers which will destroy the toolbar and it's items.
    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
    Sencha User
    Join Date
    Mar 2012
    Location
    Austin, Texas
    Posts
    4
    Vote Rating
    0
    Jotnar is on a distinguished road

      0  

    Default


    What version of IE7 did you test this with?

    I can reproduce it in the following environments:
    Lenovo T61 2.2GHz/2GB RAM
    XP Pro SP3
    IE7 version 7.0.5730.13

    Memory usage with combo:
    19,024 about:blank
    70,692 load
    94,908 1rst refresh
    118,880
    143,536
    167,380
    191,204
    215,484
    239,372
    263,204
    286,944
    310,724 10th refresh
    ...
    551,820 20th refresh
    ...
    1,269,416 50th refresh

    Memory usage without combo:
    19,024 about:blank
    70,008 load
    70,768 1rst refresh
    71,140
    71,224
    71,312
    71,556
    71,776
    72,144
    71,892
    72,068
    71,916 10th refresh

    I also got similar results using:
    Virtual Machine 2.39GHz/1GB RAM
    Windows Server 2003 Enterprise Edition SP2
    IE7 version 7.0.5730.11

    When I set break points in Firefox/Firebug, it seems that the HtmlEditor beforeDestroy function is never called. I see it getting set in initEditor, but it doesn't stop anywhere in beforeDestroy. If that's the case then the component is never getting cleaned up.

  4. #4
    Sencha User
    Join Date
    Mar 2012
    Location
    Austin, Texas
    Posts
    4
    Vote Rating
    0
    Jotnar is on a distinguished road

      0  

    Default


    Some more debugging: I overrode the initEditor function of HtmlEditor and replaced

    Code:
    Ext.EventManager.on(window, 'unload', me.beforeDestroy, me);
    with
    Code:
    Ext.EventManager.onWindowUnload(me.beforeDestroy, me);
    and now beforeDestroy is running in both Firefox and IE7. However the memory leak is still there in IE7. Stepping through the code in Firefox it does appear that all the items on the toolbar are getting removed/destroyed, as well as the toolbar from the editor, so I'm still at a loss as to what's going on in IE7.

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,778
    Vote Rating
    598
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    I agree it should use the onWindowUnload method. However, IE6/7 are notoriously bad for iframe memory management. For example, you can load up a page where you include an iframe pointing to google and you'll see the memory grow on each refresh. I'm not really sure if there's a whole lot we can do to resolve the issue.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!