Ext.grid.Panel 垂直滚动在 Mozilla Firefox 中非常慢答案

【问题标题】：Ext.grid.Panel vertical scroll is extremely slow in Mozilla FirefoxExt.grid.Panel 垂直滚动在 Mozilla Firefox 中非常慢
【发布时间】：2012-08-27 21:34:55
【问题描述】：

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

我该如何解决这个问题？

我使用的是 Mozilla Firefox 14.0.1

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

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

【问题讨论】：

标签： performance firefox extjs grid extjs4

【解决方案1】：

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

看看this。

【讨论】：

我很快就会对此进行测试。感谢您的输入！！非常感谢。

【解决方案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

【讨论】：

不，示例有效...这是我的代码...我有一个带有自定义 ASP.NET AJAX 代理的自定义商店。我会为你发布我的代码......我什至没有在我的网格中看到分页工具栏
这个确实适用于版本 4.0.1，但是当 Mozilla 发布新的默认平滑滚动时，Sencha 显然修复了这种类型的网格。所以这就是为什么这个有效。