Results 1 to 7 of 7

Thread: Memory leak using Ext.form.field.ComboBox

    Looks like we cannot reproduce this. Please provide another test case to reproduce this issue.
  1. #1
    Ext JS Premium Member
    Join Date
    Oct 2008
    Posts
    33

    Default Memory leak using Ext.form.field.ComboBox

    REQUIRED INFORMATION


    Ext version tested:
    • Ext 4.1.1


    Browser versions tested against:
    • IE6
    • IE8


    Description:
    • Memory leak using Ext.form.field.ComboBox.


    Steps to reproduce the problem:
    • Open windows task manager .
    • Open IE 6 or IE8 and check the memory allocated for the iexplorer process in windows task manager.
    • Launch the html test page listed below.
    • Select an element from the combobox.
    • A second combobox appears. Select another item in the FIRST combobox.
    • Press F5 to refresh the page
    • Check the memory allocated for iexplorer process in windows task manager.

    The result that was expected:
    • Allocated memory is equal to that allocated the first time the page was loaded.


    The result that occurs instead:
    • Memory increases, expecially in IE6, over and over if you reiterate the steps listed above.


    Test Case:

    Code:
        <html>  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
     
    <link rel="stylesheet" type="text/css" href="extJS/resources/css/ext-all.css">  
    <script type="text/javascript" src="extJS/ext-all.js"></script>  
     
    <script type="text/javascript">  
     
    Ext.onReady(function()  {
     
          function myStore(fields,data) {
                var datas = [];
                for (var i = 0; i < data.length; i++) {
                      datas[i] = { };
                      for (var j = 0; j < fields.length; j++) {
                            datas[i][fields[j]] = data[i][j];
                      }
                }
                return Ext.create('Ext.data.Store', {
                      fields: fields,
                      data : datas
                });
          }
     
          var strCouples = new Array();
          var i = 0;                    
          for(var key=0;key< 1000 ;key++)
          {
                strCouples[i] = new Array(2);
                strCouples[i][0] = key+"";
                strCouples[i][1] = "MYVALUE" + key+"";
                i++;
          }
                           
          actualStore = myStore(['value', 'label'], strCouples);
     
          combo = Ext.create('Ext.form.field.ComboBox',
                {
                            renderTo:           'simpleCombo',
                            displayField:           'label',
                            valueField:             'value',
                            store:                        actualStore,
                            id:                           'mycombo',
                            name:                   'mycombo'   
                });
     
          var strCouples2 = new Array();
          var i = 0;
          for(var key=2000;key< 3000 ;key++)
          {
                strCouples2[i] = new Array(2);
                strCouples2[i][0] = key+"";
                strCouples2[i][1] =  "MYVALUE" + key+"";
                i++;
          }
                     
          actualStore2 = myStore(['value', 'label'], strCouples2);
                                 
          function createCombobox2() {                    
                combo2 = Ext.create('Ext.form.field.ComboBox',
                      {
                            renderTo:          'simpleCombo2',
                            displayField:           'label',
                            valueField:             'value',
                            store:                        actualStore2,     
                            id:                           'mycombo2',
                            name:                   'mycombo2'  
                      });   
          };
                           
          combo.addListener("select",function(combo,options){   
         
          if (Ext.getCmp("mycombo2") != undefined)
          { 
                Ext.getCmp("mycombo2").clearListeners();
                Ext.getCmp("mycombo2").destroy();                     
          }
          createCombobox2();
          Ext.getCmp("mycombo2").setValue("2003");
          });
    });
     
    </script>  
     
    <title>Sample Combobox</title>  
    </head>  
    <body>  
     
     <div id="simpleCombo"></div>   
     <div id="simpleCombo2"></div>  
     
    </body>  
    </html>

    HELPFUL INFORMATION

    Debugging already done:
    • none


    Possible fix:
    • not provided


    Additional CSS used:
    • only default ext-all.css
    • custom css (include details)


    Operating System:
    • Windows 7

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,241

    Default

    The fact that memory increases in the process explorer doesn't really mean anything.

    I ran the following in IE6:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>Test</title>
    
            <script type="text/javascript">
                var arr = [], i = 0;
    
                for (; i < 1000; ++i) {
                    arr.push(['key' + i, 'value' + i]);
                }
    
            </script>
            <style type="text/css">
            </style>
        </head>
        <body></body>
    </html>
    After I refresh it around 20 times it's already grown around 1mb in memory.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Ext JS Premium Member
    Join Date
    Oct 2008
    Posts
    33

    Default

    Please, try our example.
    Memory increase is more than 10MBs per run with only 2 comboboxes.

    Migrating a complex application developed on ExtJS 2.2 (with no memory problems) to ExtJS 4.1 results in an unusable application due to memory leaks (hundreds MBs after few pages)

    So, please, provide us with a bug fix or a workaround to overcome this problem.
    Thank you.

  4. #4
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,241

    Default

    I'm not seeing that at all with your test case, it was run with the latest 4.x code in IE6, the memory hovers around 60-61mb. Also, as I said above, memory increase doesn't necessarily mean there is a memory leak in the framework.

    http://screencast.com/t/FyJoEquos
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  5. #5
    Ext JS Premium Member
    Join Date
    Oct 2008
    Posts
    33

    Default

    You simply refreshed the page.
    Please, follow the steps we listed in the first post to reproduce the memory leak.
    Thanks.

  6. #6
    Sencha Premium Member
    Join Date
    Dec 2011
    Posts
    44

    Default

    Have you tried removing those global variable references you made that are still attached to the object you intended to destroy?

  7. #7
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    30

    Default

    One issue is that you are not destroying your store. You'll either need to set 'autoDestroy' to 'true' when constructing your store so the combo box can destroy it, or do it yourself when appropriate.

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
  •