PDA

View Full Version : GridPanel with Ext.ux.grid.FilterRow and Ext.PagingToolbar



epi82
9 Sep 2010, 9:24 AM
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!

Condor
10 Sep 2010, 1:21 AM
Use:

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

epi82
10 Sep 2010, 2:11 AM
Hello,

Condor thanks for your answer. Sorry, I don't understand where I have to put that code.

Can you show me in my code? If you want you can see an example for understand better my issue.

Link: http://botanica.funghiitaliani.it/index2.php

Try to add a filter and then scroll the pages...

Thank you!

Condor
10 Sep 2010, 2:13 AM
Replace this part with my code:

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

epi82
10 Sep 2010, 2:20 AM
Now it's ok!

You're great! Thank you.