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