You found a bug! We've classified it as EXTJS-6877 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Jan 2008
    Posts
    38
    Vote Rating
    2
    thething is on a distinguished road

      1  

    Default Safari 6 - Scrolling seems to broken in big grids

    Safari 6 - Scrolling seems to broken in big grids


    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

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


    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.
    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.

  3. #3
    Sencha User
    Join Date
    Jan 2008
    Posts
    38
    Vote Rating
    2
    thething is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha User
    Join Date
    Jan 2008
    Posts
    38
    Vote Rating
    2
    thething is on a distinguished road

      1  

    Default


    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.

  5. #5
    Sencha User
    Join Date
    Jan 2008
    Posts
    38
    Vote Rating
    2
    thething is on a distinguished road

      0  

    Default


    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

  6. #6
    Sencha User
    Join Date
    Aug 2011
    Posts
    2
    Vote Rating
    0
    joxzaren is on a distinguished road

      0  

    Default


    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.

  7. #7
    Sencha User
    Join Date
    Oct 2012
    Location
    Sutton, UK
    Posts
    26
    Vote Rating
    0
    lenny87 is on a distinguished road

      0  

    Default


    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