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
    35,672
    Vote Rating
    747
    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
    24
    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

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