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

Question

Hello,

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 generate 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!

Answer 1

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}});
    }

Answer 2

You're right! Now works great!

Thank you very much.