1. #1
    Ext User
    Join Date
    Jun 2010
    Location
    Norway
    Posts
    16
    Vote Rating
    0
    hoeriksen is on a distinguished road

      0  

    Default JsonStore/GridPanel eats cpu

    JsonStore/GridPanel eats cpu


    Hi,

    I'm currently working on a fairly basic GridPanel which gets its data from a JsonStore. When I was testing it locally it worked like a charm, but when I uploaded it to our test server Firefox suddenly shot to 50% cpu usage and just hung as soon as I tried to use the scrollbar in the GridPanel. There is also a noticeable increase in the cpu usage (~20-30 %) if I just move the mouse over the grid. I have tried to reduce the number of records to around 20 but it is still noticeably slow. The initial dataset was 120 records which in imho is not very large. I tried reducing the number of columns with the initial dataset, but to no avail. I have also tried to create a version with Livegrid and a BufferView, but it still hangs.
    I was therefore wondering if any of you experienced and wise persons out there could take a quick look at the relevant code and give me any pointers? I am at a complete loss here

    Initial version
    Code:
        var store = new Ext.data.JsonStore({
            root            : 'staff',
            totalProperty    : 'results',
            idProperty        : 'username',
            //remoteSort        : true,
            storeId            : 'staffstore',
            autoLoad        : true,
            autoDestroy        : true,
            fields: [               
               {name:'username', type:'string'},
               {name:'name', type:'string'},
               {name:'role', type:'string'},
               {name:'email', type:'string'},
               {name:'phone', type:'string'},
               {name:'picture_url', type:'string'},
               {name:'orgunit', type:'string'}            
            ],
            proxy: new Ext.data.HttpProxy ({        
                url: '/*********/json',
            })
        });
    
    var sm = new Ext.grid.CheckboxSelectionModel();
        
        var staffGrid = new Ext.grid.GridPanel({
            store        : store,        
            sm            : sm,
            //disableSelection:true,        
            //width        :800,
            //autoHeight     : true,
            height: 600,        
            frame        :false,
            columnLines    : false,        
            renderTo    : 'stafflist',
            loadMask    : {msg:"Laster..."},        
            cm: new Ext.grid.ColumnModel({
                defaults: {                
                    sortable: true
                },
                columns: [
                    sm,                
                    {header: "",             dataIndex: 'picture_url' , renderer: renderImage, width: 55},                
                    {header: "Name",         dataIndex: 'name', id:'name', width: 100 },
                    {header: "Role",         dataIndex: 'role', width: 100},
                    {header: "Email",         dataIndex: 'email', width: 100},
                    {header: "Phone",     dataIndex: 'phone', width: 100},
                    {header: "Org. unit",     dataIndex: 'orgunit', width: 50},
                ],
                    bbar: new Ext.PagingToolbar({
                        store: store,
                        pageSize:20,
                        displayInfo:true
                    }),
    
                    view: new Ext.ux.grid.BufferView({
                        // custom row height
                        rowHeight: 34,
                        // render rows as they come into viewable area.
                        scrollDelay: false
                    })
            }),
            viewConfig: {
                forceFit:true
            }        
        });
    The JSON file looks like this (shortened for brevity and anonymized):

    Code:
    {
       "results" : "121",
       "staff": [
       {    
         "name": "xNet orcladmin Administrator",
         "username": "someusername",
         "role" : "System development",
         "email": "adsf@asdf.com",
         "phone": "*********",
         "picture_url": "*******/profile.gif",
         "orgunit": "Executive Group",
         "p_doc_id": "2937"
       },
       {    
         "name": "John Doe",
         "username": "jdoe",
         "role" : "Arrangementssjef",
         "email": "john@doe.com",
         "phone": "**********",
         "picture_url": "http://******/jdoe.jpg",
         "orgunit": "",
         "p_doc_id": "4596"
       }
    ]
    }
    My Livegrid code looks like this (basically just adapted from the demo code on the homepage):

    Code:
        var sm = new Ext.grid.CheckboxSelectionModel();
        
        var myView = new Ext.ux.grid.livegrid.GridView({
            nearLimit : 20,
            loadMask  : {
                msg :  'Buffering. Please wait...'
            }
        });
        
        var livegrid = new Ext.ux.grid.livegrid.GridPanel({
            enableDragDrop : false,
            cm             : new Ext.grid.ColumnModel([
                sm,
                {header: "",             dataIndex: 'picture_url', renderer: renderImage, width: 55},                
                {header: "Name",         dataIndex: 'name', id:'name', width: 100 },
                {header: "Role",         dataIndex: 'role', width: 100},
                {header: "Email",         dataIndex: 'email', width: 100},
                {header: "Phone",     dataIndex: 'phone', width: 100},
                {header: "Org.unit",     dataIndex: 'orgunit', width: 100}
            ]),
            loadMask       : {
                msg : 'Loading...'
            },
            //title          : 'Large table',
            height :600,
            store    : new Ext.ux.grid.livegrid.Store({
                autoLoad : true,
                url: '/*******/json',
                bufferSize : 20,
                reader     : new Ext.ux.grid.livegrid.JsonReader({
                    root            : 'staff',                
                    totalProperty   : 'results',
                    id              : 'username'
                  },[  {name:'username', type:'string'},
                       {name:'name', type:'string'},
                       {name:'role', type:'string'},
                       {name:'email', type:'string'},
                       {name:'phone', type:'string'},
                       {name:'picture_url', type:'string'},
                       {name:'orgunit', type:'string'}
                  ])    
            }),
            selModel : sm,
            //view     : myView,
            bbar     : new Ext.ux.grid.livegrid.Toolbar({
                view        : myView,
                displayInfo : true
            }),
            renderTo: 'stafflist'
        });
        console.log(livegrid);
        livegrid.render('viewport');
    The renderImage function is defined and works but returning an <img> tag with the relevant path

    Any help is very very appreciated!

    HÃ¥vard

  2. #2
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    You're using a user extension. You should probably contact the author.

  3. #3
    Ext User
    Join Date
    Jun 2010
    Location
    Norway
    Posts
    16
    Vote Rating
    0
    hoeriksen is on a distinguished road

      0  

    Default


    Thanks for the suggestion, but the grid behaved identically both with and without the Bufferview (in the standardized version) and with the Livegrid. I worked around it by restricting the number of rows to 10 and adding a Pagingtoolbar, but I'm still curious of why the performance is so horrible?

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    95
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Only 120 records and 6 columns? That shouldn't be slow at all, even with a normal gridview.

    Which browser/PC are you running this on?

    (not IE6 on a something like a P4 Celeron I hope?)

  5. #5
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,664
    Vote Rating
    7
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    AFAIK livegrid doesn't work with version 3.3 yet, stay tuned for an update.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  6. #6
    Ext User
    Join Date
    Jun 2010
    Location
    Norway
    Posts
    16
    Vote Rating
    0
    hoeriksen is on a distinguished road

      0  

    Default


    Hehe, those specs are luckily long gone. No, I've testet it on IE 8, FF 3.6 and Opera (whatever the newest version is). My computer is a dual Pentium 2 GHz with 3 GB of ram.
    I suspect it's something to do with the interaction with the rest of the page because it worked perfectly when I testet it locally on a "clean" page that only contained the grid. When I tried to track this down I tried to find a good memory leak tool for Javascript but to no avail. Do you know if there are any good tools for this out there?

Similar Threads

  1. CPU overload - tree.root.expandAllChildren(true) kills CPU - IE only
    By mkppk in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 20 Feb 2009, 1:10 PM
  2. BEWARE: Vista System Restore eats .js files!!!
    By skippy in forum Community Discussion
    Replies: 3
    Last Post: 27 Oct 2007, 7:12 AM
  3. TabPanel eats display: inline; of parent element
    By SwellJoe in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 2 Mar 2007, 11:35 PM

Thread Participants: 3

Tags for this Thread