You found a bug! We've classified it as EXTJSIV-8181 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. 8 Jan 2013 6:14 AM #1
    timTaylor
    timTaylor is offline
    Sencha User
    Join Date
    Jan 2012
    Posts
    59
    Vote Rating
    4
    timTaylor is on a distinguished road
      0  

    Default memory leaks showing/hiding panels [4.0.7] and also [4.1.1a]

    memory leaks showing/hiding panels [4.0.7] and also [4.1.1a]


    I do have the following situation:

    A container Panel with 2 panels inside. 2 Buttons to hide/show the 2nd panel.
    Now showing and hiding the 2nd panel leads to memory leaks that makes an ExtJS application useless after a while because of slowing down from click to click. Of course this example consumes only KB, but I found out this bug on my ExtJS test application where I do have a complex panel layout with much data so every click consumes 500kb there!!

    here's the example code to reproduce:

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd"    >
    <    html>
    <    head>

        <    link href="js/extjs407/resources/css/ext-all-gray.css" rel="stylesheet" type="text/css" >
        <    script type="text/javascript" src="js/extjs407/ext-all-debug-w-comments.js"></script>
        <title></title>
    </head>
    <body>

    <script>

        Ext.onReady(
                function()
        {
            console.log("----ready---");
    // ---- container with 2 panels + toolbar

            var panel1Toolbar =
            {
                xtype :'toolbar',
                itemId:'devTestPanel1toolbar',
                items :[
                    {
                        text   :'show panel #2',
                        handler:function ()
                        {
                            Ext.getCmp('devTestPanel2').show();
                        }
                    },
                    {
                        text   :'hide panel #2',
                        handler:function ()
                        {
                            Ext.getCmp('devTestPanel2').hide();
                        }
                    }
                ]
            };

            var contentObj = {
                layout:"auto",
                title :"FitLayout Container",
                items :[
                    {
                        xtype      :"panel",
                        title      :"Panel#1",
                        id         :"devTestPanel1",
                        dockedItems:[ panel1Toolbar ],
                        width      :200,
                        height     :200
                    },
                    {
                        xtype :"panel",
                        title :"Panel#2",
                        id    :"devTestPanel2",
                        hidden:true,
                        width :200,
                        height:200
                    }
                ]
            };


    // ---- the window
            var window = Ext.create("Ext.window.Window",
                    {
                        width:200,
                        height:400
                    });

            window.add(contentObj);
            window.showAt(300);
        }
                );

    </script>
    </body>
    </html> 
    at first run:
    google chrome / profiles / heap snapshot is 8.91MB
    now, clicking show/hide 10 times:
    google chrome / profiles / heap snapshot is 9.02MB
    clicking another 10 times:
    google chrome / profiles / heap snapshot is 9.05MB

    to be sure that this symptom is not produced by google crome itself, i set up an equal situation with pure html and jQuery:

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd"    >
    <    html>
    <    head>
        <    script type="text/javascript" src="js/jQuery/jquery-1.7.1.min.js"></script>
        <title></title>
    </head>
    <body>

    <div style="border:1px solid">
        <div style="border-bottom:1px solid">
            CONTAINER
        </div>
        <input type="button" value="HIDE" id="hidePanel"/>
        <input type="button" value="SHOW" id="showPanel"/>

        <div id="panel1" style="border:1px solid; height: 300px;margin: 10px">
            <div style="border-bottom:1px solid">
                PANEL #1
            </div>
        </div>
        <div id="panel2" style="border:1px solid; height: 300px;margin: 10px">
            <div style="border-bottom:1px solid">
                PANEL #2
            </div>
        </div>
    </div>

    <script type="text/javascript">

        $(document).ready(function ()
        {

            console.log("jquery ready");

            $("#hidePanel").click(function ()
            {
                console.log("hide clicked");
                $("#panel2").hide();
            });

            $("#showPanel").click(function ()
            {
                console.log("show clicked");
                $("#panel2").show();
            });

        });

    </script>

    </body>
    </html> 
    clicking the show/hide button for 100+ times leaves the snapshot size constant at 1.84MB.

    so, what i'm doing wrong with ExtJS or is there really a bug??
    new to ExtJS
    Reply With Quote Reply With Quote
  2. 8 Jan 2013 7:28 AM #2
    mitchellsimoens
    mitchellsimoens is offline
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    St. Louis, MO
    Posts
    33,714
    Vote Rating
    438
    mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of
      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.
    Reply With Quote Reply With Quote
  3. 24 Jan 2013 4:35 AM #3
    timTaylor
    timTaylor is offline
    Sencha User
    Join Date
    Jan 2012
    Posts
    59
    Vote Rating
    4
    timTaylor is on a distinguished road
      0  

    Default


    i'd just want to ask if there are some news on this bug?
    thanks
    new to ExtJS
    Reply With Quote Reply With Quote