EXTJS 5.0:无限网格滚动无法在存储中使用extraParams

时间:2015-10-06 13:39:05

标签: grid buffer store infinite-scroll extjs5

我正在使用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 个答案:

答案 0 :(得分:2)

我通过添加

解决了这个问题
store.removeAll();
                    store.currentPage = 1;
                    store.getProxy().setExtraParam("fromDate", fromDay);
                    store.getProxy().setExtraParam("toDate", toDay);
                    store.load();