Question

我有一个大约10列的网格面板，我的数据存储中大约有1000条记录。因为可见记录的数量小于数据存储记录的数量，所以我在网格面板中得到一个垂直滚动条。当网格显示在Internet Explorer 9或Google Chrome中时，当我使用鼠标滚轮时，垂直滚动条会很好地移动。但是在Mozilla Firefox中，它的滚动速度非常慢。每次完整的手指拉动只允许看到一个额外的记录/行，或更少。

我该如何解决这个问题？

我正在使用Mozilla Firefox 14.0.1

5:21 PM更新 ..分页工具栏未显示

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

Answer 1

为了回答您的第一个问题，Firefox从版本13开始“平滑滚动”默认配置.ExtJS 4.1.0没有考虑到这一点，但这在4.1.1中处理。您必须升级才能处理它，或者您可以将其从4.1.1代码中分离出来。

看看this。

Answer 2

Ext.data.Store中有一个可能有帮助的缓冲区设置。

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

我在firefox上测试过这个样本，它比chrome慢一点，但是可用。

如果它仍然太慢，可能会将分页添加到网格中。

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

在Mozilla Firefox中，Ext.grid.Panel垂直滚动速度非常慢

2 个答案: