PDA

View Full Version : Filters on a grid



yegortitov
21 Jun 2010, 1:55 AM
hi,

i've got a problem with filter on my grid. The filter is working fine but the plugin "Paging" is not refreshed when i filter on a column. For example, if i have 2 pages (with 50 results per page) , i filter on a column, if i have 10 results i still have 2 pages while i must have 1 page.

My code is



Ext.onReady(function(){

var myData = [......................];

// configure whether filtering is performed locally or remotely (initially)
var local = true;
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

// create the data store
var store = new Ext.data.Store({
proxy: new Ext.ux.data.PagingMemoryProxy(myData),
remoteSort:true,
sortInfo: {field:'nomprenom', direction:'ASC'},
reader: new Ext.data.ArrayReader({
fields: [
{name: 'insee'},
{name: 'nomprenom', type : 'string'},
{name: 'datearret', type: 'date', dateFormat: 'Y-m-d'},
{name: 'datedebut', type: 'date', dateFormat: 'Y-m-d'},
{name: 'datefin', type: 'date', dateFormat: 'Y-m-d'},
{name: 'dateop', type: 'date', dateFormat: 'Y-m-d'},
{name: 'montantbrut', type: 'string'},
{name: 'montantretenue', type: 'string'},
{name: 'montantreglements', type: 'string'}
]
})
});

var filters = new Ext.ux.grid.GridFilters({
local: local, // defaults to false (remote filtering)
filters:[{type: 'string', dataIndex: 'nomprenom'}]}
);

// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
baseCls : 'x-panel-header-agrica',
columns: [
{id:'insee',header: 'Insee<br>&nbsp;', width: 100, sortable: true, dataIndex: 'insee'},
{header: 'Nom Pr&eacute;nom<br>&nbsp;', width: 110, sortable: true, dataIndex: 'nomprenom'},
{header: 'Date arr&ecirc;t<br>&nbsp;', width: 70, sortable: true, renderer: Ext.util.Format.dateRenderer('d/m/Y'), dataIndex: 'datearret'},
{header: 'Date d&eacute;but<br>&nbsp;', width: 70, sortable: true, renderer: Ext.util.Format.dateRenderer('d/m/Y'), dataIndex: 'datedebut'},
{header: 'Date fin<br>&nbsp;', width: 70, sortable: true, renderer: Ext.util.Format.dateRenderer('d/m/Y'), dataIndex: 'datefin'},
{header: 'Date<br>op&eacute;ration', width: 70, sortable: true, renderer: Ext.util.Format.dateRenderer('d/m/Y'), dataIndex: 'dateop'},
{header: 'Montant <br>Brut', width: 75, sortable: false, dataIndex: 'montantbrut'},
{header: 'Montant <br>Retenues', width: 75, sortable: false, dataIndex: 'montantretenue'},
{header: 'Montant <br>R&egrave;glements', width: 75, sortable: false, dataIndex: 'montantreglements'}
],
enableColumnMove : false,
enableColumnHide :false,
stripeRows: true,
width:740,
height: 610,
plugins: filters,
loadMask: true,

tbar: new Ext.PagingToolbar({
pageSize: 50,
store: store,
displayInfo: true,
displayMsg: 'Affichage IJ {0} - {1} de {2}',
emptyMsg: 'Aucune indemnit&eacute; trouv&eacute;e pour cette p&eacute;riode',
cls: 'x-toolbar-entreprise',
plugins: filters
})
});

grid.on("afterrender", function(component) {
component.getTopToolbar().refresh.hideParent = true;
component.getTopToolbar().refresh.hide();
});
grid.render('ij');

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



Thanks for answer

Condor
21 Jun 2010, 2:38 AM
PagingToolbar was primarily designed for remote datasets and is missing several features for local datasets.

The modified PagingToolbar that comes with my PagingStore user extension would handle this correctly.

ps. Maybe a good moment to replace PagingMemoryProxy with PagingStore too?