You found a bug! We've classified it as EXTJS-9843 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext JS Premium Member aedos's Avatar
    Join Date
    Dec 2009
    Posts
    148
    Vote Rating
    2
    aedos is on a distinguished road

      1  

    Default ExtJs 4.2: Memory leak in Table Layout

    ExtJs 4.2: Memory leak in Table Layout


    Ext version tested:
    • Ext 4.2.0.663
    Browser versions tested against:
    • IE9
    • Chrome 26
    Description:
    • Leaks in cache entries demonstrated in the following test case.
    Steps to reproduce the problem:
    • Load the test case into the browser
    • Click the "Update Center" button in the north region, which will replace the center panel content.
    • Each click (wait for 35 seconds apart to allow for the 30s ExtJs cache flush) on the button causes two layout calls and each layout call leaks a cache entry for the owning x-table-layout-cell for the panel being replaced.
    Test Case:
    Code:
            
            Ext.create('Ext.data.Store', {
                storeId:'simpsonsStore',
                fields:['name', 'email', 'phone'],
                data:{'items':[
                    { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
                    { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
                    { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
                    { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
                ]},
                proxy: {
                    type: 'memory',
                    reader: {
                        type: 'json',
                        root: 'items'
                    }
                }
            });
    
    
            var grid = {
                title: 'Simpsons',
                shrinkWrap: true,
                shrinkWrapDock: true,
                xtype: 'grid',
                store: Ext.data.StoreManager.lookup('simpsonsStore'),
                columns: [
                    { text: 'Name',  dataIndex: 'name', width:200 },
                    { text: 'Name2',  dataIndex: 'name', width:200 },
                    { text: 'Name3',  dataIndex: 'name', width:200 },
                    { text: 'Email', dataIndex: 'email', flex: 1 },
                    { text: 'Phone', dataIndex: 'phone' }
                ]
            };
    
    
            Ext.define('foo.tablecontainer', {
                extend: 'Ext.panel.Panel',
                border: false,
                alias:'widget.tablecontainer',
                defaultType: 'tablecontainer',
    
    
                layout:{
                    tableAttrs: {
                        style: {width:'100%'}
                    },
                    type:'table'
                },
    
    
                initComponent: function() {
                    this.callParent(arguments);
                    if (this.columns) {
                        this.layout.columns = this.columns;
                    }
                }
            });
    
    
            var dv = {
                columns: 1,
                items: [{
                    fieldLabel:'name',
                    width: 250,
                    value: 'Joe Smith',
                    xtype:'textfield'
                },
                    {
                        fieldLabel:'email',
                        xtype:'textfield'
                    }]
            };
    
    
            var dvOuter = {
                items: [{
                    fieldLabel:'address',
                    width: 250,
                    value: '',
                    xtype:'textfield'
                },
                dv ]
            };
    
    
    
    
            var centerConfig = {
                items:[
                    dvOuter,
                    grid
                ]
            };
    
    
            Ext.onReady(function () {
    
    
                Ext.create('Ext.container.Viewport', {
                    title: 'Border Layout',
                    layout: 'border',
                    items: [{
                        title: 'North Region',
                        region: 'north',     // position for region
                        tbar:{
                            items:[
                                {
                                    handler: function() {
                                        var center = Ext.ComponentManager.get('center');
                                        Ext.suspendLayouts();
                                        center.removeAll();
                                        center.add(Ext.apply(centerConfig, {id: 'panel' + new Date().getTime()}));
                                        Ext.resumeLayouts(true);
                                    },
                                    text:'Update Center'
                                }]
                        },
                        height: 100
                    },{
                        title: 'West Region',
                        region:'west',
                        width: 200,
                        split: true,
                        collapsible: true
                    },{
                        title: 'Center Region',
                        region: 'center',
                        id: 'center',
                        xtype:'tablecontainer',
                        autoScroll: true,
                        items: centerConfig
                    }]
                });
            });
    See attached screen shot from chrome profiler:

    The leaked elements all reference the same DOM element (td.x-table-layout-cell in the picture). In fact, it’s because they point to a DOM element that is in use that they are not being GC’d. In the picture, { ext-gen1127, ext-gen1143 }, { ext-gen179, ext-gen1195 }, etc. are pairs of leaked references from past. It’s current owning reference is further down, by ext-gen1247.
    Attached Images

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


    Thanks for the report.
    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.

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar