ExtJS - GridPanel with Ext.ux.grid.FilterRow and Ext.PagingToolbar

I've add "FilterRow" plugin to a GridPanel with PagingToolBar. The Grid works good except for this issue: if I try to sort or filter a column the grid ge开发者_如何学Cnerate this POST variables --> sort, dir and all my filters enabled. Instead if I try to go to next page this POST variables --> sort, dir, start, limit. If I try to scroll pages I lose filter's variables previously posted. This is my code:

Ext.onReady(function(){            

    var store = new Ext.data.JsonStore({
      url: "get-data-for-grid.php",
      root: "rows",
      id:'id',   
      totalProperty:'totalCount',      
      remoteSort: true,
      sortInfo: {
            field: 'genere',
            direction: 'ASC'
      },      
      autoDestroy: true,
      fields: [
         {name: 'scheda'},
         {name: 'topic'},
         {name: 'genere'},
         {name: 'specie'},
         {name: 'autore'},
         {name: 'comme'},
         {name: 'famiglia'},
         {name: 'nomecomune'},
         {name: 'datains'}
      ]
    });

    var filterRow = new Ext.ux.grid.FilterRow({
      autoFilter: false,
      listeners: {
        change: function(data) {
          store.load({
            params: data
          });
        }
      }
    });       

    // create the Grid
      var grid = new Ext.grid.GridPanel({
        store: store,
        loadMask: true,
        columns: [
            {id:'scheda', header: "Scheda", width: 73, align: 'center', sortable: false, renderer: scheda, dataIndex: 'scheda'},                    
            {id:'genere', header: "Genere", width: 130, renderer: gen, sortable: true, dataIndex: 'genere', filter:{ }},
            {id:'specie', header: "Specie", width: 150, sortable: true, renderer: spe, dataIndex: 'specie', filter:{ }},
            {id:'autore', header: "Autore", width: 150, sortable: true, renderer: all, dataIndex: 'autore', filter:{ }},
            {id:'famiglia', header: "Famiglia", width: 150, sortable: true, renderer: fam, dataIndex: 'famiglia', filter:{ }},
            {id:'nomecomune', header: "Nome Comune", width: 190, sortable: true, renderer: all, dataIndex: 'nomecomune', filter:{ }},
            {id:'datains', header: "Aggior.", width: 75, sortable: true, renderer: data, dataIndex: 'datains'}   
        ],
        highlightClasses: {
          ASC:  'x-custom-sort-asc'
          // DESC stays at default = x-ux-col-sort-desc
        },        
        bbar: new Ext.PagingToolbar({
            pageSize: 15,
            store: store,
            displayInfo: true
        }),    
        plugins: [filterRow],

        height:660,
        width:1010,
        frame:true,                
        title:
        '<div align="center"><img src="images/testata_micologia.jpg" alt="" height="68" width="974" border="0"></div>',
        renderTo: "grid-example"
      });          

    grid.render('grid-example');

    store.load({params:{start:0, limit:15}});
});

How can "Ext.PagingToolbar" generate filter's POST variables previously posted (genere, specie, autore,.. in my example)?

Thank you!

In order to persist your filter parameters you have to use the baseParams property instead of the params property of the store.

The baseParams property will persist across all the calls to the load method.

So I would implement this in your change listener of your FilterRow:

    change: function(data) {
      Ext.apply(store.baseParams, data);
      store.load({params:{start:0, limit:15}});
    }