ExtJS Grid呈現比頁面中指定的更多的行

Question

我已經基於Sencha給出的示例實現了無限網格。基本上，代理使用jsonp獲取json文件並填充網格。我希望網格大小爲10，我希望代理僅在用戶向下滾動至第10條記錄時才發出後續請求。每個記錄在網格視圖中垂直放置足夠的空間，只有約5條記錄可以不滾動（在我的14英寸筆記本電腦上，分辨率爲1366 x 768）。我已經將pagesize設置爲10，我的期望是，只有當我向下滾動到可見記錄之外時，纔會刷新網格。但是，即使沒有滾動，網格也會加載所有數據（共50條記錄），並提供5個單獨的請求。下面的代碼：

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

其他JSON文件都遵循相同的格式，具有獨特的內容ID，和有正確的回調（callback2，callback3，callback4和callback5）。

有人能告訴我爲什麼所有5個jsonp請求都會立即被解僱，而不是等待我滾動嗎？

感謝， Prathap

Answer 1

謝謝大家指點我在正確的方向。所以，這裏是最後的工作：

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

}); 

訣竅是正確的設置在店裏都與電網的bufferedrenderer插件，並重寫插件的onViewResize方法緩衝區設置。 bufferedrenderer的ViewSize屬性是根據rowheight計算出來的，由於某些原因，其總是默認值21，因此導致60的ViewSize大於服務器中的記錄總數（50） 。這導致所有行都被立即取回。一旦我將viewsize屬性覆蓋到了18，viewsize就相應地改變了，現在我只有第一次抓取了30條記錄。並按需加載完美滾動以及:)

Answer 2

您正在使用buffered配置。如果啓用buffered，則默認情況下，存儲將多於5個頁面加載到預取高速緩存中。爲了更改已知頁面的數量，請使用purgePageCount配置。

Answer 3

您需要爲leadingBufferZone和trailingBufferZone設置正確的值以獲取正確的記錄數。