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

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

有没有办法将加载数据后的无限滚动动态集成到存储中。。？我使用的是ExtJS4.1。请帮帮我。 在这里，我将在控制器和夹点视图面板中显示我的当前脚本，我在其中进行了尝试，但没有工作

控制器脚本如下所示：

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

    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调用响应，就用tabParams添加网格面板，并用gridConfig param传递数据，该参数将为网格设置字段和列，然后最后一条语句将网格数据提供给网格。我通过以下参考示例尝试了网格面板设置：

在上面的页面上，包含的脚本=>

我的网格面板脚本如下所示：

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

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

Ext.define（'ReportsBuilder.view.GeneratedReportGrid'{
扩展：“Ext.grid.Panel”，
别名：“widget.generatedReportGrid”，
要求：[
“ReportsBuilder.view.GenerateViewToolbar”，
“Ext.grid.*”，
“Ext.data.*”，
“Ext.util.*”，
“Ext.grid.PagingScroller”，
“Ext.grid.RowNumber”，
],
initComponent:function（）{
Ext.define（'Report'，{extend:'Ext.data.Model'，字段：this.gridConfig.fields，idProperty:'rowid'}）；
var myStore=Ext.create（'Ext.data.Store'，{model:'Report'，groupField:'name'，
//允许网格通过缓冲与分页滚动条交互
缓冲区：对，
页面大小：100，
自动同步：对，
外部参数：{总数：50000}，
purgePageCount:0，
代理：{
键入：“ajax”，
数据：{}，
外部参数：{
总数：50000
},
读者：{
root:'数据'，
totalProperty:“totalCount”
},
//将单个排序作为多参数发送
simpleSortMode:true
}
});   
Ext.apply（本{
摘要：[
{xtype:'generateviewToolbar'}
],
商店：myStore，
宽度：700，
身高：500，
滚动：‘垂直’，
loadMask：是的，
verticalScroller:'paginggridscroller'，
invalidateScrollerOnRefresh:false，
视图配置：{
跟踪：错误，
清空文本：[
'',
“提供的条件没有结果”，
'',
''
].加入（“”）
},
columns:this.gridConfig.columns，
特点：[
{ftype:'groupingsummary'，groupHeaderTpl:'{name}（{rows.length}记录{[values.rows.length>1？'s:']}），enableGroupingMenu:false}
],
renderTo:Ext.getBody（）
});
//触发数据存储加载
myStore.担保（0,99）；
this.callParent（参数）；
}
});

我还处理了服务器端查询的start和limit，但它不会立即在scroll上发送ajax请求，因为网格中的pageSize属性是100，而guaranteeRange函数调用参数是0,99。如果我增加了0299，那么它将一次触发三个ajax调用（0100）、（100200）和（200300）但仅在第一次ajax调用时在网格上显示数据，而不在垂直滚动时触发

因为，我是ExtJs的新手，所以请帮助我。。。

---

非常感谢..在advanced.

中，您不能使用远程/缓冲存储和网格实现调用

store.loadData

，而期望网格反映这些新数据

相反，您必须调用

store.load

示例1，使用

store.load的缓冲存储

此示例显示了
store.on（“load”）
事件触发


示例2，使用
store.loadData

从本例中可以看出，
store.on（“load”）
事件从未触发


根据我的经验，4.0.0、4.0.2a、4.0.7和4.1中的缓冲滚动（除其他外；））都实现得很差，并且有很多bug。直到4.0.7，一个需要无限滚动才能工作的类根本没有类文档。这可能有帮助：。Ext有4次机会正确滚动，但他们没有这样做，因此我们最终编写了我们自己的，更灵活，可用于视图、自定义组件以及网格。您是否使用过滤器？您解决过这个问题吗？这将是很好的，让它标记为完成，因为它已经打开了很长一段时间现在你的后端看起来怎么样？