Ext.grid.Panel vertical scroll is extremely slow in Mozilla Firefox

1
votes

I have a grid panel with about 10 columns, and roughly 1000 records in my data store. Because the number of visible records is less than the data store record count, I get a vertical scroll bar in the grid panel. When the grid is displayed in Internet Explorer 9, or Google Chrome, the vertical scroll bar moves nice and quickly when I use my mouse scroll wheel. But in Mozilla Firefox, it scrolls extremely slow. Every full finger pull allows just one additional record/row to be seen, or less.

How can I fix this?

I'm using Mozilla Firefox 14.0.1

5:21PM update .. paging toolbar not showing up

    var store = new Ext.data.Store({

        pageSize: 50,
        // allow the grid to interact with the paging scroller by buffering
        buffered: true,
        // never purge any data, we prefetch all up front
        purgePageCount: 0,
        model: 'Project',
        //proxy: {
        //    type: 'memory'
        //},

        proxy: new Ext.ux.AspWebAjaxProxy({
            url: '/Controls/ProjectList/ProjectListService.asmx/GetProjectList',
            actionMethods: {
                create: 'POST',
                destroy: 'DELETE',
                read: 'POST',
                update: 'POST'
            },
            reader: {
                type: 'json',
                model: 'Project',
                root: 'd'
            },
            headers: {
                'Content-Type': 'application/json; charset=utf-8'
            }
        }),
        autoLoad: true
    });



Ext.define('Ext.ux.AspWebAjaxProxy', {
    extend: 'Ext.data.proxy.Ajax',
    require: 'Ext.data',

    buildRequest: function (operation) {
        var params = Ext.applyIf(operation.params || {}, this.extraParams || {}),
                                request;
        params = Ext.applyIf(params, this.getParams(params, operation));
        if (operation.id && !params.id) {
            params.id = operation.id;
        }

        params = Ext.JSON.encode(params);

        request = Ext.create('Ext.data.Request', {
            params: params,
            action: operation.action,
            records: operation.records,
            operation: operation,
            url: operation.url
        });
        request.url = this.buildUrl(request);
        operation.request = request;
        return request;
    }
});
2
performancefirefoxextjsgridextjs4

2 Answers

3
votes

To answer your first question, Firefox made "smooth scrolling" a default config since version 13. ExtJS 4.1.0 did not take that into account but this is handled in 4.1.1. You would have to upgrade to handle it or you can piece it out of the 4.1.1 code.

Take a look at this.

1
votes

There is a buffer setting in the Ext.data.Store that might help. 

var store = Ext.create('Ext.data.Store', {
    id: 'store',
    pageSize: 50,
    // allow the grid to interact with the paging scroller by buffering
    buffered: true,
    // never purge any data, we prefetch all up front
    purgePageCount: 0,
    model: 'ForumThread',
    proxy: {
        type: 'memory'
    }
});

http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/buffer-grid.html

I've tested the sample on firefox and it's a bit slower than chrome, but usable.

If it's still too slow maybe paging should be added to the grid.

http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/paging.html