Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/474.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript ExtJS 4.1.1无限滚动仅加载第一页_Javascript_Extjs_Extjs4.1_Infinite Scroll - Fatal编程技术网

Javascript ExtJS 4.1.1无限滚动仅加载第一页

Javascript ExtJS 4.1.1无限滚动仅加载第一页,javascript,extjs,extjs4.1,infinite-scroll,Javascript,Extjs,Extjs4.1,Infinite Scroll,我想要一个带有extjs4和c#后端的无限滚动网格。。。我正在控制器中设置代理api 我的模型: Ext.define('appname.model.training.course.TrainingRequirementList', { extend: 'Ext.data.Model', idProperty: 'ID', fields: [ { name: 'ID', type: 'int', convert: null }, { nam

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

我的模型:

Ext.define('appname.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: 'appname.model.training.course.TrainingRequirementList',
        pageSize: 200,
        autoLoad: true,
        buffered: 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' },
}
在controoler中设置代理:

view.grid.getStore().setProxy({
            type: 'direct', 
            model: 'appname.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('appname.view.training.course.TrainingRequirements',
    {
        extend: 'Ext.panel.Panel',
        require: [ 'Ext.grid.PagingScroller'],
我的网格仅加载前200行,滚动条的大小仅与200行的滚动条一样大

服务器响应包含以下条目:

{"ID":99,"PlanId":23,"firstname":"name","lastname":"name","Comment":"","Status":3,"ConfirmType":0,"Priority":"entry","DesiredDate":null,"StartDate":new Date(1354107600000),"ActualCost":180,"EstimatedCost":0,"row":201,"TotalCount":8568,"EmployeeName":"some, name","Description":"","StatusText":"state","Date":"28.11.2012","Cost":"EUR 180"}
我错过了什么

更新

当我向下滚动时,脚本也会加载第二页。。还是没什么


如果您需要更多信息,请毫不犹豫地询问

您的服务器是否在响应中包含正确的
TotalCount

编辑:

根据您的读者配置,您的服务器应该用这种格式的数据进行应答(当然,您的应答也应该是有效的JSON,这里使用Javascript进行说明):

在您的情况下,您的
TotalCount
似乎混合在每个项目数据中

关于服务器端的实现,您是对的:它应该只是记录的总数,所以类似于数据库中的
COUNT(*)


还有一件事:
新日期(1354107600000)
不是有效的JSON。一旦JSON被解码,您应该使用字符串并将其转换为日期。例如,在您的模型中,您可以将字段类型配置为Ext处理:
{name:'Date',type:'Date',format:'d.m.Y'}

,因为您可以看到
TotalCount
响应是8568,这是正确的数字。我的TotalCount只是sql中所有行的一个计数,如下所示:
count(*)over()作为TotalCount,我这样做是否正确?我向下滚动时,我刚刚看到他也在加载第二页。。但仍然不是所有条目..:/抱歉,我没有看到它,因为我假设您显示的数据仅用于一条记录。您的答复格式似乎有一些问题。我正在更新我的答案来解释。非常感谢。似乎我不明白数据集是什么样子的。我会尝试一下,然后回复你
{
    // total property at the root level of response object
    TotalCount: 8568,

    // root for items data, configured as "ID" in your reader (you should probably
    // change that to something like "records" or "data" to better express meaning)
    ID: [
        // individual fields data
        {ID: 1, EmployeeName: 'Foo', ...},
        {ID: 2, EmployeeName: 'Bar', ...},
        ...
    ]

    // if you had, for example, a successProperty, it would go here too
    ,success: true
}