ExtJS 4.1 无限网格滚动不起作用答案

【问题标题】：ExtJS 4.1 Infinite Grid Scrolling doesnt workExtJS 4.1 无限网格滚动不起作用
【发布时间】：2013-05-31 00:11:46
【问题描述】：

我想获得一个带有 extjs4 和 c# 后端的无限滚动网格...我正在我的控制器中设置代理 api..

我的模特：

Ext.define('SCT.model.training.course.TrainingRequirementList', {
    extend: 'Ext.data.Model',
    idProperty: 'ID',
    fields: [
        { name: 'ID', type: 'int', convert: null },
        { name: 'EmployeeName', type: 'string' },
        { name: 'Description', type: 'string' },
        { name: 'StatusText', type: 'string' },
        { name: 'Status', type: 'int' },
        { name: 'Priority', type: 'string' },
        { name: 'Date', type: 'string' },
        { name: 'Cost', type: 'string' },
        { name: 'CanApprove', type: 'bool' },
        { name: 'CanRequest', type: 'bool' },
        { name: 'ConfirmStatus', type: 'string' },
        { name: 'PlanId', type: 'int'}
    ]

});

我的网格：

{
    xtype: 'gridpanel',
    flex: 1,
    padding: '0 10 10 10',
    minHeight: 200,
    verticalScroller: {
        xtype: 'paginggridscroller'
    },
    store: {
        model: 'SCT.model.training.course.TrainingRequirementList',
        pageSize: 200,
        autoLoad: true,

        remoteSort: true,
        sorters: {
            property: 'Date',
            direction: 'DESC'
        },

        proxy: {
            type: 'direct',
            extraParams: {
                total: 50000
            },
            reader: {
                type: 'json',
                root: 'ID',
                totalProperty: 'totalCount'
            },
            simpleSortMode: true
        }
    },
    columns:
        [{
            text: Lang.Main.Employeee,
            dataIndex: 'EmployeeName',
            flex: 1,
            filterable: true
        },
        {
            text: Lang.Main.Course,
            dataIndex: 'Description',
            flex: 1,
            filterable: true
        },
        {
            text: Lang.Main.Status,
            dataIndex: 'StatusText',
            flex: 1,
            filterable: true
        },
        {
            text: Lang.Main.Priority,
            dataIndex: 'Priority',
            flex: 1
        },
        {
            text: Lang.Main.Date,
            dataIndex: 'Date',
            flex: 1
        },
        {
            text: Lang.Main.Cost,
            dataIndex: 'Cost',
            flex: 1,
            filterable: true
        },
        {
            text: Lang.Main.Actions,
            flex: 1,
            align: 'center',
            xtype: 'actioncolumn',
            width: 50,
            items: [{
                icon: 'Design/icons/cog_edit.png',
                tooltip: Lang.Main.Open,
                handler: function (grid, rowIndex, colIndex, item) {
                    this.onGridOpen(grid.getStore().getAt(rowIndex));
                }
            }]
        }],      
    selModel: { mode: 'MULTI', selType: 'checkboxmodel' },
}

在控制器中设置代理：

view.grid.getStore().setProxy({
            type: 'direct', 
            model: 'SCT.model.training.course.TrainingRequirementList', 
            api: { read: SCT.Service.Training.Plan.GetFilteredRequirements }, 
            extraParams: { total: 50000 }, 
            reader: {
                type: 'json',
                root: 'ID',
                totalProperty: 'totalCount'
            },
            simpleSortMode: true
        });

关于我的观点的其他信息：

Ext.define('SCT.view.training.course.TrainingRequirements',
    {
        extend: 'Ext.panel.Panel',
        require: [ 'Ext.grid.PagingScroller', 'Ext.ux.grid.FiltersFeature'],

我的网格仍在一次加载所有数据（大约 8000 行...）... 我已经搜索了解决方案并完成了教程..我仍然不明白。

请帮帮我...我完全不明白...

更新

这是我的 srv 请求：

响应得到 3MB（大约 8k 数据集...）..??

【问题讨论】：

Ext 的精确版本是多少？这是一个一直在改变的功能......
另外，您确定您的服务器支持limit 和start（或page）参数吗？它们是否存在于加载商店时浏览器发送的请求中？
刚刚更新了我的帖子...菜鸟问题：我怎样才能看到精确的版本？
我猜我的错误在我的服务器脚本中的某个地方。我猜它实际上没有遵守限制和/或页面。你认为我的猜测是正确的？
关于版本..：我在 sencha.cfg 文件中找到以下行：framework.version=4.1.1

标签： javascript extjs infinite-scroll

【解决方案1】：

您的请求转储显示 Ext 有效地发送了 limit 参数，所以那是您的服务器没有处理它...

只是一个建议，但您应该考虑升级到 Ext 的最新版本，因为缓冲了 grid seems to have been simplified，这样可以避免您在最终升级时重新修改它。

【讨论】：