EXTJS 5.0：无限网格滚动不适用于商店中的 extraParams

Posted 2023-03-16

【中文标题】EXTJS 5.0：无限网格滚动不适用于商店中的 extraParams

【英文标题】：EXTJS 5.0: Infinite Grid scrolling not working with extraParams in store

【发布时间】：2016-01-03 11:03:37

【问题描述】：

我正在使用 ExtJS 5.0.1。我有一个不自动加载的网格。使用 TopBar 中的单击按钮手动加载商店后，网格将接收记录。 我正在尝试在此网格上实现无限滚动。我的商店有额外的参数需要传递到后端才能获取记录。第一个页面加载后，对于第二个页面，没有额外的参数传递给后端。我该如何纠正？ 我的店铺如下 ->

Ext.define('MyStore', 
  // extend: 'Ext.data.BufferedStore',
  extend: 'Ext.data.Store',
  model  : 'MyModel',

  remoteSort: true,
  buffered: true,
  leadingBufferZone: 10,
  trailingBufferZone: 10,
  pageSize: 100,

  proxy: 
    type  : 'rest',
    format: 'json',
    url   : '/myApp/list',
    extraParams: 
      fromDate: '',
      toDate: ''
    ,
    reader: 
      type: 'json',
      rootProperty: 'data',
      totalProperty: 'totalCount'
    
  
);

我的网格如下-->

Ext.define('MyGridl', 
    extend: 'Ext.grid.Panel',
    requires: [
    'MyStore'
    ],
    layout: 'fit',
    loadMask: true,
    viewConfig: 
       preserveScrollOnRefresh: true
   ,          
   initComponent: function() 
    this.id = 'myGrid';
    this.store = new MyStore();
    this.callParent(arguments);
,
overflowY: 'auto',
frame: true,
columns: [
    xtype: 'rownumberer',
    width: 50,
    sortable: false
,
    text: 'Column1',
    dataIndex: 'Col1',
    flex: 1
,
    text: 'Column2',
    dataIndex: 'Col2',
    flex: 1

],
plugins: [

    ptype: 'bufferedrenderer',
    trailingBufferZone: 10,
    leadingBufferZone: 10,
    scrollToLoadBuffer: 10

],  
tbar: 
    items: [
        xtype      : 'datefield',
        id         : 'fromDate',
        emptyText: 'Enter From Date',
        listeners : 
            render : function(datefield) 
                datefield.setValue(Ext.Date.add(new Date(), Ext.Date.DAY, -5));
            
        
    ,
        xtype      : 'datefield',
        id         : 'toDate',
        emptyText: 'Enter To Date',
        listeners : 
            render : function(datefield) 
                datefield.setValue(new Date());
            
        
    ,
        xtype: 'button',
        text: 'Filter by Date',                                    
        style: 
            marginLeft: '15px'
        ,
        scope: this,
        handler: function(me)      
            var store = Ext.getStore('myStore'),
            fromDay = me.up().down('#fromDate').getValue(),
            toDay = me.up().down('#toDate').getValue();

            store.removeAll();
            store.load(
                params:
                    fromDate: fromDay,
                    toDate: toDay
                 
            );   
                         

                           
    ]

);

【问题讨论】：

在后端添加总数解决了我加载更多记录的问题。但是当第二页加载时，我无法将额外的参数发送到后端。我该如何解决这个问题？

【参考方案1】：

我通过添加解决了这个问题

store.removeAll();
                    store.currentPage = 1;
                    store.getProxy().setExtraParam("fromDate", fromDay);
                    store.getProxy().setExtraParam("toDate", toDay);
                    store.load();