ExtJS的4.1.1無限滾動只加載第一頁

Question

我想用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'} 
    ] 

}); 

我的網格：在controoler

{ 
    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' }, 
} 

設置代理：

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"} 

我在想什麼？

UPDATE

當我向下滾動腳本加載第二個網頁也..仍然沒有更多...

，如果你定義的更多信息不要猶豫問

Answer 1

貴服務器在響應中包含正確的TotalCount值？

編輯：

根據讀者的配置，您的服務器應該格式化這樣的數據回答（當然你的反應也應該是有效的JSON，這裏JavaScript是用於說明）：

{ 
    // 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 
} 

就你的情況而言，你的TotalCount似乎是混合在每個項目數據？

你對服務器端的實現是正確的：它應該只是記錄的總數，所以類似於數據庫中的COUNT(*)。

還有一件事：new Date(1354107600000)是無效的JSON。您應該使用一個字符串並在JSON解碼後將其轉換爲日期。例如，在您的模型中，您可以將字段類型配置爲讓Ext處理您的：{name: 'Date', type: 'date', format: 'd.m.Y'}。