in EXTJS 4 , how to add extra params when NEXT PAGE clicked on pagingtoolbar

Question

I use EXTJS 4.2.1.

Here is my DATA STORE.

Ext.define("user",{
  extend:"Ext.data.Model",
  fields:[
    {name:'mobile',type:'string',sortable:true},
    {name:'name',type:'string',sortable:true},
    {name:'month',type:'string',sortable:true},
    {name:'city',type:'string',sortable:true},
    {name:'mail_number',type:'string',sortable:true}
  ]
});

var user = Ext.create("user",{});

var ds = Ext.create("Ext.data.Store",{
    model:'user',
    storeId:'s_user',
    pageSize: 20,
    proxy:{
      type:'ajax',
      timeout: 40000,
      url:'JSONServlet',
      reader:{
        type:'json',
        root:'rows'
      },
      writer:{
        type:'json'
      }
    },
    autoLoad:false
 });

And i add some params where ds loads.

  ds.load({
                params:{start:0, limit:20,     
                    'type': Ext.getCmp('type').value,  
                    'city': Ext.getCmp('city').value,  
                    'date': Ext.getCmp('date').value,
                    'date1': Ext.getCmp('date1').value
                }       
            })

I put a pagingtoolbar on the bottom of the grid.

  var grid = Ext.create("Ext.grid.Panel",{

      ...

      dockedItems :[{
          xtype:'pagingtoolbar',
          store:Ext.data.StoreManager.lookup('s_user'),
          dock:'bottom',
          displayInfo:true
      }],

      ...
      store : Ext.data.StoreManager.lookup('s_user')
  }

On the first page everything is OK, but when NEXT page is clicked, ds pramas don't POST to server. I look into the source. I find code like this.

      case "next":  
                ds.load({params:{start: this.cursor+this.pageSize, limit: this.pageSize}});  
            break;

how to make PAGE NEXT work as i want, I hope someone give me a hint.

Answer 1

If you need that parameters will be included on every request, you can set them in your proxy configuration with extraParams config.

proxy:{
      // ...
      extraParams: {
          'type': Ext.getCmp('type').value,  
          'city': Ext.getCmp('city').value,  
          'date': Ext.getCmp('date').value,
          'date1': Ext.getCmp('date1').value
      }
      // ...
},

If value of extra parameters can be changed between request you can set them in listener for store beforeload event by proxy setExtraParam method:

ds.on('beforeload', function() {
   var proxy = ds.getProxy();
   proxy.setExtraParam('type', Ext.getCmp('type').value);
   proxy.setExtraParam('city', Ext.getCmp('city').value);
   proxy.setExtraParam('date', Ext.getCmp('date').value);
   proxy.setExtraParam('date1', Ext.getCmp('date1').value);
})