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,337
    Vote Rating
    75
    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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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,649
    Vote Rating
    6
    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

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