javascript - ExtJS 4.1 无限网格滚动不适用于使用 loadData 的动态存储

Question

我必须在选项卡上加载第一个网格面板，然后使用 loadData() 函数将数据加载到存储中，该函数工作正常，但现在我必须将无限网格滚动与其集成。

有什么方法可以在将数据加载到存储中之后在运行中集成无限滚动..？我正在使用 ExtJS 4.1。请帮帮我。在这里，我在 Controller 和 handle View 面板中展示了我当前的脚本，我在其中进行了尝试但无法正常工作。

Controller 脚本如下:

var c = this.getApplication().getController('Main'),
    data = c.generateReportGridConfiguration(response,true),
    tabParams = {
        title: 'Generated Report', 
        closable: true, 
        iconCls: 'view', 
        widget: 'generatedReportGrid', 
        layout: 'fit', 
        gridConfig: data
    },
    generatedReportGrid = this.addTab(tabParams);

generatedReportGrid.getStore().loadData(data.data);

在上面的脚本中，一旦我获得 Ajax 调用响应，添加带有 tabParams 的网格面板并使用 gridConfig 参数传递数据，这将为网格设置字段和列，然后最后一条语句将网格数据提供给网格。我已经通过以下引用示例尝试了网格面板设置: http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/infinite-scroll.html

在上面的页面中，包含的脚本=> http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/infinite-scroll.js

我的网格面板脚本如下:

    Ext.define('ReportsBuilder.view.GeneratedReportGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.generatedReportGrid',
     requires: [
        'ReportsBuilder.view.GenerateViewToolbar',
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.grid.PagingScroller',
        'Ext.grid.RowNumberer',    
    ],
    initComponent: function() {
         Ext.define('Report', {extend: 'Ext.data.Model', fields: this.gridConfig.fields, idProperty: 'rowid'}); 

         var myStore = Ext.create('Ext.data.Store', {model: 'Report', groupField: 'name',

           // allow the grid to interact with the paging scroller by buffering
              buffered: true,
              pageSize: 100,
              autoSync: true,
              extraParams: { total: 50000 },
              purgePageCount: 0,
              proxy: { 
                  type: 'ajax',
                  data: {},
                  extraParams: {
                       total: 50000
                  },
                  reader: {
                      root: 'data',
                      totalProperty: 'totalCount'
                  },
                 // sends single sort as multi parameter
                 simpleSortMode: true
              }
         });   
       Ext.apply(this, {
                dockedItems: [
                    {xtype: 'generateviewToolbar'}
                ],
                store: myStore,
                width:700,
                height:500,
                scroll: 'vertical',
                loadMask: true,
                verticalScroller:'paginggridscroller',
                invalidateScrollerOnRefresh: false,
                viewConfig: {
                    trackOver: false,
                    emptyText: [
                        '<div class="empty-workspace-bg">',
                        '<div class="empty-workspace-vertical-block-message">There are no results for provided conditions</div>',
                        '<div class="empty-workspace-vertical-block-message-helper"></div>',
                        '</div>'
                    ].join('')
                },
                columns:  this.gridConfig.columns,
                features: [
                    {ftype: 'groupingsummary', groupHeaderTpl: '{name} ({rows.length} Record{[values.rows.length > 1 ? "s" : ""]})', enableGroupingMenu: false}
                ],
                renderTo: Ext.getBody()
        });
     // trigger the data store load
     myStore.guaranteeRange(0, 99); 
     this.callParent(arguments);
   }
});

我还处理了服务器端查询的启动和限制，但它不会在刚刚触发的滚动上发送 ajax 请求，因为网格中的 pageSize 属性为 100 并且 guaranteRange 函数调用参数为 0,99 如果我将增加 0,299 那么它将同时触发三个 ajax 调用 (0,100)、(100,200) 和 (200,300)，但仅在网格上显示第一个 ajax 调用的数据，而不是在垂直滚动时触发。

因为，我是 ExtJs 的新手，所以请帮助我...非常感谢..高级。

Answer 1

您不能通过远程/缓冲存储和网格实现调用 store.loadData 并期望网格反射(reflect)此新数据。

相反，您必须调用 store.load。

示例 1，使用 store.load 进行缓冲存储

此示例显示了 store.on("load") 事件触发。

http://codepen.io/anon/pen/XJeNQe?editors=001

;(function(Ext) {
  Ext.onReady(function() {
    console.log("Ext.onReady")

    var store = Ext.create("Ext.data.Store", {
      fields: ["id", "name"]
      ,buffered: true
      ,pageSize: 100
      ,proxy: {
        type: 'rest'
        ,url: '/anon/pen/azLBeY.js'
        reader: {
          type: 'json'
        }
      }
    })
    store.on("load", function(component, records) {
      console.log("store.load")
      console.log("records:")
      console.log(records)
    })

    var grid = new Ext.create("Ext.grid.Panel", {
      requires: ['Ext.grid.plugin.BufferedRenderer']
      ,plugins: {
        ptype: 'bufferedrenderer'
      }
      ,title: "people"
      ,height: 200
      ,loadMask: true
      ,store: store
      ,columns: [
        {text: "id", dataIndex: "id"}
        ,{text: "name", dataIndex: "name"}
      ]
    })
    grid.on("afterrender", function(component) {
      console.log("grid.afterrender")
    })
    grid.render(Ext.getBody())    

    store.load()
  })
})(Ext)

示例 2，使用 store.loadData 的静态存储

您可以从这个示例中看到 store.on("load") 事件永远不会触发。

http://codepen.io/anon/pen/XJeNQe?editors=001

;(function(Ext) {
  Ext.onReady(function() {
    console.log("Ext.onReady")

    var store = Ext.create("Ext.data.Store", {
      fields: ["id", "name"]
      ,proxy: {
        type: 'rest'
        ,reader: {
          type: 'json'
        }
      }
    })
    store.on("load", function(component, records) {
      console.log("store.load")
      console.log("records:")
      console.log(records)
    })

    var grid = new Ext.create("Ext.grid.Panel", {
      title: "people"
      ,height: 200
      ,store: store
      ,loadMask: true
      ,columns: [
        {text: "id", dataIndex: "id"}
        ,{text: "name", dataIndex: "name"}
      ]
    })
    grid.on("afterrender", function(component) {
      console.log("grid.afterrender")
    })
    grid.render(Ext.getBody())

    var data = [
      {'id': 1, 'name': 'Vinnie'}
      ,{'id': 2, 'name': 'Johna'}
      ,{'id': 3, 'name': 'Jere'}
      ,{'id': 4, 'name': 'Magdalena'}
      ,{'id': 5, 'name': 'Euna'}
      ,{'id': 6, 'name': 'Mikki'}
      ,{'id': 7, 'name': 'Obdulia'}
      ,{'id': 8, 'name': 'Elvina'}
      ,{'id': 9, 'name': 'Dick'}
      ,{'id': 10, 'name': 'Beverly'}
    ]

    store.loadData(data)
  })
})(Ext)