Safari 6 - Scrolling seems to broken in big grids

**thething** · 26 Jul 2012 8:14 AM

Ext version tested:
Ext 4.1.1

Browser versions tested against:
Safari 6 (doesnt work)

FF 14 (works)

Safari 5 (works)

Description

Original Message:

Hi guys,

can someone confirm that? After the the update to safari 6 (with mountain lion) the scrolling performance is completely broken down in grids with many records.

Thx

Edit: Sorry Ext JS 4.1.1, Grid with more than 100 items.
Edit: The Samples are working, i am really clueless

**mitchellsimoens** · 26 Jul 2012 10:49 AM

Trying to use the infinite scroll the scrolling doesn't seem to work the best in Safari 6 so will push this so we can look into Safari 6.

**thething** · 26 Jul 2012 11:56 AM

Thanks for your answer - infinite scrolling is a little bit glitchy, but the scrolling in my project is really not working it is more than slow (it remembers me of the problems with Firefox before 4.1.1).

I will try to isolate the problem tomorrow and then post it here

**thething** · 30 Jul 2012 3:21 AM

I tried to isolate the problem, recreated our base structure and filled it with one of the example grids . The grid won't react if there are too many records in the store, i tried copy/pasting and came to 20-50 records = no problem, about 1000 = nearly no reaction on any action. Normally our grid is nested in a viewport (we needed this because of toolbars, i haven't evaluated if this this really necessary, but this is the actual structure), this will not work in the example because of an error (protoEl is null), i have not followed this problem because it seems to have no relevance and it doesn't occur in our structure.

Code:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EXTJSIV-6877</title>
<link rel="stylesheet" type="text/css" href="/lib/ext/4.1.1-gpl/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/lib/ext/4.1.1-gpl/examples/shared/example.css" />
<script type="text/javascript" src="/lib/ext/4.1.1-gpl/ext-all-debug.js"></script>
<!-- page specific -->
<style type="text/css">
/* style rows on mouseover */
.x-grid-row-over .x-grid-cell-inner {
    font-weight: bold;
}
</style>
<script type="text/javascript">




Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*'
]);


Ext.onReady(function() {
    Ext.QuickTips.init();

// sample static data for the store
var myData = [];
for(i=0; i<1000; i++) {
myData.push(['3m Co',71.72, 0.02,  0.03,  '9/1 12:00am']);
    }


/**
     * Custom function used for column renderer
     * @param {Object} val
     */
function change(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
        } else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
        }
return val;
    }


/**
     * Custom function used for column renderer
     * @param {Object} val
     */
function pctChange(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
        } else if (val < 0) {
return '<span style="color:red;">' + val + '%</span>';
        }
return val;
    }


// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
        fields: [
           {name: 'company'},
           {name: 'price',      type: 'float'},
           {name: 'change',     type: 'float'},
           {name: 'pctChange',  type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ],
        data: myData
    });


// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        columnLines: true,
        columns: [{
            text     : 'Company',
            flex     : 1,
            sortable : false,
            dataIndex: 'company'
        }, {
            text: 'Stock Price',
            columns: [{
                text     : 'Price',
                width    : 75,
                sortable : true,
                renderer : 'usMoney',
                dataIndex: 'price'
            }, {
                text     : 'Change',
                width    : 75,
                sortable : true,
                renderer : change,
                dataIndex: 'change'
            }, {
                text     : '% Change',
                width    : 75,
                sortable : true,
                renderer : pctChange,
                dataIndex: 'pctChange'
            }]
        }, {
            text     : 'Last Updated',
            width    : 85,
            sortable : true,
            renderer : Ext.util.Format.dateRenderer('m/d/Y'),
            dataIndex: 'lastChange'
        }],
        height: 350,
        width: 600,
        title: 'Grouped Header Grid',
        viewConfig: {
            stripeRows: true
        }
    });

Ext.define('MainPanel', {
        extend        : 'Ext.panel.Panel',
        alias        : 'widget.mainpanel',
        bodyStyle    : 'padding:5px 5px 0',
        layout        : 'border',
        height        : 500,
        autoScroll    : true,
        animCollapse: false,
        constructor: function(config) {
this.initConfig();
this.callParent(arguments);
        },
//@override
initComponent : function(){        
this.build();
this.callParent(arguments);
        }, //endFUNCTION initComponent


build: function(){
var config = {
// dockedItems: this.buildDockedItems(),
items     : this.buildItems()
            };
            Ext.apply(this, Ext.apply(this.initialConfig, config));
        }, //endFUNCTION build

buildItems: function(){

var items = [{
                region            : 'north',
                layout            : 'border',
                title            : 'Suchformular',
                header            : false,
                animCollapse    : false,
                margins            : '0 5 0 5',
                border            : false,
                height             : 272,
                items: [grid]

            },{
                region    : 'center',
                layout    : 'border',
                 margins : '5 5 5 5',
                items    : [{
                        html        : 'West Accordion',
                        region        : 'west'
                },{
                    html        : 'Newspanel',
                    region        : 'center'
                },{ 
                    html        : 'Detailpanel',
                    region        : 'east'
                }]

}];//ENDE: items mainpanel      

return items;
        }
    });    


    Ext.define('Viewport',{
        extend: 'Ext.container.Viewport',
        layout: 'fit',
        items: [
            {
                xtype            : 'mainpanel'
            }
        ]   
    });

// Alt: throws error protoEl is null
// var viewport = Ext.create("Viewport").render("grid-example");
var viewport = Ext.create("MainPanel").render("grid-example");

});    


</script>
</head>
<body>
<div id="grid-example"></div>
</body>
</html>

Sorry - attachments didn't work. The whole browser seems to crash with the file opened.

Edit: Replaced the array part to be better scalable for testing.

**thething** · 31 Jul 2012 3:12 AM

Another strange behavior:

in Firefox 14.0.1 the scrolling via cursor is broken, it reacts very slow but mouse scrolling works without problem.

After i switched to a buffered View in one grid, the mouse scrolling is glitchy - as already recognized - but scrolling via cursor works in Safari 6.

Edit: FF Problem seems to be Mac only, it works on Win 7 and Firefox 14.0.1

**joxzaren** · 2 Aug 2012 1:39 AM

I'm having the same problem with 200 items in the grid. It is slow for both Safari 6 and Chrome. However, it works fins with Firefox Aurora.

**lenny87** · 8 Feb 2013 6:21 AM

I still suffer from this problem. Any update on a work around or estimated release for this? Currently running on Safari 6.0.2 and encountering the problem.

Regards,

Andrew

Safari 6 - Scrolling seems to broken in big grids

Thread Tools

Search Thread

Display

Safari 6 - Scrolling seems to broken in big grids

Safari 6 - Scrolling seems to broken in big grids