【问题标题】:infinite scroll not rendering无限滚动不渲染
【发布时间】:2012-09-11 10:25:35
【问题描述】:

我正在尝试使用 ExtJS4.1 无限滚动功能。
正在进行 ajax 调用,返回数据,但仅加载第一页。
我究竟做错了什么?当我向下滚动时,什么也没有发生。

我的代码:
商店:

Ext.define('BM.store.Tests', {
    extend: 'Ext.data.Store',
    model: 'BM.model.Test',

    storeId: 'Tests',
    buffered: true,
    leadingBufferZone: 50,
    pageSize: 25,
    purgePageCount: 0,
    autoLoad: true
});

代理在模型中:

proxy: {
    type: 'ajax',
    api: {
        create: '../webapp/tests/create',
        read: '../webapp/tests',
        update: '../webapp/tests/update'
    },
    reader: {
        type: 'json',
        root: 'tests',
        successProperty: 'success'
    }
}

网格:

Ext.define('BM.view.test.MacroList', {
    extend: 'Ext.grid.Panel',
    alias:'widget.macro-test-list',

    store: 'Tests',

//    loadMask: true,
//    selModel: {
//        pruneRemoved: false
//    },
//    viewConfig: {
//        trackOver: false
//    },

    verticalScroller: {
        numFromEdge: 5,
        trailingBufferZone: 10,
        leadingBufferZone: 20
    },

    initComponent: function() {

        this.columns = [
            {
                xtype: 'gridcolumn',
                dataIndex: 'name',
                text: 'Name'
            },
            {
                xtype: 'datecolumn',
                dataIndex: 'created',
                text: 'Date Created',
                format: 'd-M-Y'
            },
            {
                xtype: 'datecolumn',
                dataIndex: 'changed',
                text: 'Last Updated',
                format: 'd-M-Y'
            }
        ];
        this.callParent(arguments);
    }

我的实现与示例中的实现唯一不同的是,我的网格没有呈现到正文。
视口包含一个边框布局。
网格是西部区域面板的一部分:

{
    collapsible: true,
    region: 'west',
    xtype: 'macro',
    width: 500
}

宏面板:

Ext.define('BM.view.Macro', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.macro',

    title: 'Tests',

    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [
    {
        id: "macro-test-list-id",
        xtype: 'macro-test-list',
        flex: 1
    },
    {
        id: "macro-report-panel-id",
        xtype: 'macro-report-list',
        title: false,
        flex: 1
    },
    {
        id: "macro-report-list-id-all",
        xtype: 'macro-report-list-all',
        flex: 1,
        hidden: true,
        layout: 'anchor'
    }
    ]
});

我已经尝试了很多东西,改变布局,给网格一个固定的高度等等......
没有任何效果,向下滚动,网格不会刷新。
另一条信息:数据库包含 53 条数据记录。我收到了 3 个 ajax 调用,但只显示了前 25 条记录(如我所要求的那样)。
有什么想法吗?

【问题讨论】:

    标签: extjs grid extjs4.1 infinite-scroll


    【解决方案1】:

    听起来您可能忘记将 total 属性放入服务器的 JSON 响应中。你的答案是否有这样的结构:

    {
        "total": 53, 
        "tests": [(...)]
    }
    

    totalProperty 名称在 Reader 配置中定义,默认为 total

    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.reader.Reader-cfg-totalProperty

    【讨论】:

    • 它没有。您在 Doc 的什么地方看到需要它? docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-cfg-buffered
    • 对不起,totalProperty 默认为“total”,编辑了上面的答案。
    • Sencha 隐藏这些重要功能的能力令人惊叹。如果可行,我将连续 7 次接受您的回答。 :)
    • 不幸的是,这仍然不起作用。如果我给它以下参数:buffered: true, leadingBufferZone: 75, pageSize: 25 它会预先加载整个数据库。在前导缓冲区小于 57 或未定义的任何其他情况下,加载掩码不会消失,它会永远加载存储,卡在最后一页。
    • 您使用的是哪个版本的 ExtJS?刚刚在4.0看到了类似的问题,但是在4.1没有复现。
    【解决方案2】:

    您需要升级到 ExtJS 4.2!

    【讨论】:

      猜你喜欢
      • 2011-06-05
      • 2018-04-28
      • 1970-01-01
      • 2017-01-04
      • 2019-06-10
      • 1970-01-01
      • 2010-12-24
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多