Question

我必须在选项卡上加载第一个网格面板，然后使用loadData（）函数将数据加载到存储中，该函数工作正常，但现在，我必须将无限网格滚动与它集成。是什么方法在loadData进入商店后将无限滚动整合到飞行中？我正在使用ExtJS 4.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);

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

在上面的页面，包含的脚本=＆gt; 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);
   }
});

我还处理了服务器端查询的启动和限制但是它不会立即发送一次刚刚触发的滚动请求，因为网格中的pageSize属性为100而如果我将增加0,299则guaranteeRange函数调用参数为0,999然后它将立即触发三个ajax调用（0,100），（100,200）和（200,300），但仅在第一个ajax调用的网格上显示数据，而不是在垂直滚动时触发。

因为，我是ExtJs的新学员，所以请帮帮我... 非常感谢..先进。

Answer 1

您不能使用远程/缓冲存储和网格实现调用store.loadData，并期望网格反映这些新数据。

相反，您必须致电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)

ExtJS 4.1无限网格滚动无法使用loadData与动态存储一起使用

1 个答案: