CODEWITHSUNDEEP
performancefirefoxextjsgridextjs4
JustBeingHelpful
JustBeingHelpful

Reputation: 18980

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

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;
    }
});

Upvotes: 1

Views: 3892

Answers (2)

egerardus
egerardus

Reputation: 11486

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.

Upvotes: 3

sissonb
sissonb

Reputation: 3780

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

Upvotes: 1

Related Questions