Fatal编程技术网
  • extjs/
  • ExtJS网格渲染的行数超过pagesize中指定的行数

ExtJS网格渲染的行数超过pagesize中指定的行数

extjs

ExtJS网格渲染的行数超过pagesize中指定的行数,extjs,infinite-scroll,extjs4.2,Extjs,Infinite Scroll,Extjs4.2,我已经基于Sencha给出的示例实现了一个无限网格。基本上，代理使用jsonp获取json文件并填充网格。我希望网格大小为10，并且我希望代理仅在用户向下滚动接近第10条记录时才发出后续请求。在网格视图中，每条记录在垂直方向上都占据了足够的空间，并且在不滚动的情况下只能看到大约5条记录（在我的14英寸笔记本电脑上，分辨率为1366 x 768）。我已经将pagesize设置为10，我的期望是只有当我向下滚动到可见记录之外时，网格才会刷新。但是，即使不滚动，网格也会通过发出5个单独的请求来加载所有

我已经基于Sencha给出的示例实现了一个无限网格。基本上，代理使用jsonp获取json文件并填充网格。我希望网格大小为10，并且我希望代理仅在用户向下滚动接近第10条记录时才发出后续请求。在网格视图中，每条记录在垂直方向上都占据了足够的空间，并且在不滚动的情况下只能看到大约5条记录（在我的14英寸笔记本电脑上，分辨率为1366 x 768）。我已经将pagesize设置为10，我的期望是只有当我向下滚动到可见记录之外时，网格才会刷新。但是，即使不滚动，网格也会通过发出5个单独的请求来加载所有数据（总共50条记录）。代码如下：

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.grid.plugin.BufferedRenderer'
]);

Ext.onReady(function() {
    Ext.define('ContentModel', {
        extend : 'Ext.data.Model',
        fields : [ 'content_id', 'content' ],
        idProperty: 'content_id'
    });

    var store = Ext.create('Ext.data.Store', {
        id : 'store',
        model : 'ContentModel',
        buffered: true,
        pageSize: 10,
        proxy : {
            type : 'jsonp',
            url : 'http://website.com/Top1.json',
            reader: {
                root: 'contents',
                totalProperty: 'totalCount'
            }
        },
        autoLoad : true
    });

    var grid = Ext.create('Ext.grid.Panel', {
        renderTo : Ext.getBody(),
        width : '100%',
        height : '100%',
        title : 'Reader Panel',
        id : 'reader',
        store : store,
        columns : [ {
            id : 'content_id',
            text : 'Content ID',
            dataIndex : 'content_id',
            width : '10%'
        },
        {
            id : 'content',
            text : 'Content',
            dataIndex : 'content',
            width : '90%'
        } ]
    });

    Ext.define('JSONP Proxy', {
        override: 'Ext.data.proxy.JsonP',
        buildUrl: function(request) {
            var me = this, url = this.getUrl(request);
            console.log(url);
            request.url = 'http://website.com/Top' + request.params.page + '.json';
            return me.callParent([request]);
        }
    });

});
json文件的内容如下：

Top1.json：

Ext.data.JsonP.callback1({"totalCount":"50", "contents":[{"content_id" : 1, "content" : "<div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br>"},{"content_id" : 2, "content" : "<div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br>"},{"content_id" : 3, "content" : "<div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br>"},{"content_id" : 4, "content" : "<div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br>"},{"content_id" : 5, "content" : "<div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br>"},{"content_id" : 6, "content" : "<div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br>"},{"content_id" : 7, "content" : "<div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br>"},{"content_id" : 8, "content" : "<div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br>"},{"content_id" : 9, "content" : "<div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br>"},{"content_id" : 10, "content" : "<div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br>"}]});

Ext.data.JsonP.callback1（{“totalCount”：“50”，“contents”：[{“content\u id”：1，“content”：“Hello World 1
Hello World 1
Hello World 1
Hello World 1
Hello World 1
Hello World 1
Hello World 1
Hello World 1
Hello World 1
Hello World 1
”，{“内容id”：3，“内容”：“你好世界1
你好世界1
你好世界1
你好世界1
你好世界1
你好世界1
你好世界1
”，{“内容id”：4，“内容”：“你好世界1
你好世界1
你好世界1
你好世界1
你好世界1
，{“内容id”：5，“内容”：“Hello World 1
Hello World 1
Hello World 1
Hello World 1
Hello World 1
Hello World 1
Hello World 1
Hello World 1
Hello World 1
Hello World 1
Hello World 1
Hello World 1
Hello World 1
Hello World 1
Hello World 1
Hello World 1
Hello World 1
你好世界1
你好世界1
你好世界1
你好世界1
你好世界1
你好世界1
“}，{“内容id”：8，“内容”：“你好世界1
你好世界1
你好世界1
你好世界1
你好世界1
你好世界1
”}，{“内容id”：9，“内容”：”你好世界1
你好世界1
你好世界1
你好世界1
你好世界1
你好世界1
“}，{“内容”\u id:10，“内容”：“你好世界1
你好世界1
你好世界1
你好世界1
你好世界1
你好世界1
”}）；
其他json文件遵循相同的格式，具有唯一的内容ID，并具有正确的回调（callback2、callback3、callback4和callback5）

有人能告诉我为什么所有5个jsonp请求都会被立即解雇，而不是等待我滚动吗

谢谢，
Prathap

您使用的是
缓冲的
配置。如果启用了
缓冲的
，则默认情况下，store会将另外5页加载到预取缓存中。要更改已完成的页面数，请使用config。

您需要为设置正确的值并获得正确的记录数。

谢谢大家给我指正方向。因此，以下是最终奏效的方法：

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.grid.plugin.BufferedRenderer'
]);

Ext.onReady(function() {
    Ext.define('ContentModel', {
        extend : 'Ext.data.Model',
        fields : [ 'content_id', 'content' ],
        idProperty: 'content_id'
    });

    var store = Ext.create('Ext.data.Store', {
        id : 'store',
        model : 'ContentModel',
        buffered: true,
        pageSize: 10,
        trailingBufferZone: 5,
        leadingBufferZone: 5,
        purgePageCount: 0,
        scrollToLoadBuffer: 10,
        proxy : {
            type : 'jsonp',
            url : 'http://website.com/Top' + 0 + '.json',
            reader: {
                root: 'contents',
                totalProperty: 'totalCount'
            }
        },
        autoLoad : true
    });

    var grid = Ext.create('Ext.grid.Panel', {
        renderTo : Ext.getBody(),
        width : '100%',
        height : '100%',
        title : 'Reader Panel',
        id : 'reader',
        store : store,
        plugins : [{
            ptype: 'bufferedrenderer',
            trailingBufferZone: 5,
            leadingBufferZone: 5,
            scrollToLoadBuffer: 10,
            onViewResize: function(view, width, height, oldWidth, oldHeight) {
                // Only process first layout (the boxready event) or height resizes.
                if (!oldHeight || height !== oldHeight) {
                    var me = this,
                        newViewSize,
                        scrollRange;

                    // View has rows, delete the rowHeight property to trigger a recalculation when scrollRange is calculated
                    if (view.all.getCount()) {
                        // We need to calculate the table size based upon the new viewport size and current row height
                        delete me.rowHeight;
                    }
                    // If no rows, continue to use the same rowHeight, and the refresh handler will call this again.

                    // Calculates scroll range. Also calculates rowHeight if we do not have an own rowHeight property.
                    // That will be the case if the view contains some rows.
                    scrollRange = me.getScrollHeight();
                    //newViewSize = Math.ceil(height / me.rowHeight) + me.trailingBufferZone + me.leadingBufferZone;
                    newViewSize = 18;
                    me.viewSize = me.setViewSize(newViewSize);
                    me.stretchView(view, scrollRange);
                }
            }
        }],
        columns : [ {
            id : 'content_id',
            text : 'Content ID',
            dataIndex : 'content_id',
            width : '10%'
        },
        {
            id : 'content',
            text : 'Content',
            dataIndex : 'content',
            width : '90%'
        } ]
    });

    Ext.define('JSONP Proxy', {
        override: 'Ext.data.proxy.JsonP',
        buildUrl: function(request) {
            var me = this, url = this.getUrl(request);
            console.log(url);
            request.url = 'http://website.com/Top' + request.params.page + '.json';
            return me.callParent([request]);
        }
    });

});
诀窍是在store和grid的bufferedrenderer插件中设置正确的缓冲区设置，并覆盖插件的onViewResize方法。bufferedrenderer的ViewSize属性是根据rowheight计算的，出于某种原因，它的默认值始终为21，因此产生的ViewSize为60，大于服务器中的记录总数（50）。这导致立即获取所有行。一旦我将viewsize属性改写为18，viewsize会相应更改，现在我第一次只获取了30条记录。按需加载在滚动时也能完美工作：）

感谢指针。但是，将purgePageCount设置为0并不能解决问题奇怪的是，将purgePageCount设置为1到4之间的任何值都会导致一个空网格。谢谢，我确实使用了这两个参数。以下是我最近尝试过的设置-pageSize:10，trailingBufferZone:5，leadingBufferZone:5，purgePageCount:0，scrollToLoadBuffer:10，它仍然无法修复它：/How do您需要使用此bufferedrenderer插件？如果您在此处或此处签入示例，则未使用此插件。您的视图经常调整大小吗？我使用它是因为在4.2中实现了无限网格。您共享的第二个链接使用缓冲插件呈现器。不，我的视图不会手动调整大小ed经常，但我猜每次刷新视图时都会计算viewsize，这在用户上下滚动时会频繁发生。不确定我们是否在同一页上，就像我在查看JS文件的代码时一样--我发现插件仅通过“require”包含，但没有使用p按您的方式键入。好吧，我的理解是，您需要包含用于缓冲工作的插件。leadingbufferzone、trailingbufferzone等属性现在是bufferedrender插件的一部分-pagingscroller插件现在已从4.2中删除