PDA

View Full Version : Dynamically add some filters to grid



Hanuchin
22 Feb 2013, 5:35 AM
Hello,


i have a grid with a local store and want to add and activate filters for two or more columns, but im currently not able to activate more then one filter a time.




filter = Ext.create('Ext.ux.grid.FiltersFeature', {
ftype: 'filters',
local: true
});





grid = Ext.create('Ext.grid.Panel', {
store: store,
columnLines: true,
selModel: selModel,
features: [filter],
columns: [{
text: 'Testcol',
dataIndex: 'COLNAME1',
filter: {
type: 'string',
dataIndex: 'COLNAME1',
value: 'a',
active: true
}
}]
});

To add the filters when creating the panel does not work. The filter is not active after loading the grid.




So i tried following:


After the grid has been rendered, i can easily add a single filter with


grid.filters.addFilter( {dataIndex: 'COLNAME', value: 'a', active: true} );
grid.filters.reload();

Thats ok!
Reset the filters with grid.filters.clearFilters(); works


Now i want to add 2 or more filters:


grid.filters.addFilter( {dataIndex: 'COLNAME1', value: 'a', active: true} );
grid.filters.addFilter( {dataIndex: 'COLNAME2', value: 'b', active: true} );
grid.filters.reload();

This does not work.


Then i tried to use addFilters:


grid.filters.addFilters([
{dataIndex: 'COLNAME1', value: 'a', active: true},
{dataIndex: 'COLNAME2', value: 'b', active: true}
]);

But this also does not work.

Both times only the first column is ok, but the second and third filters are getting ignored.

I hope somebody can show me, how to get along with this problem.
Thanks, hanu

scottmartin
22 Feb 2013, 10:26 AM
See if this will help:



Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../../extjs4/examples/ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.grid.FiltersFeature'
]);

var store = Ext.create('Ext.data.Store', {
storeId : 'simpsonsStore',
fields : ['name', 'email', 'change'],
data : {'items' : [
{ 'name' : 'Lisa', 'email' : 'lisa@simpsons.com', 'change' : 100 },
{ 'name' : 'Bart', 'email' : 'bart@simpsons.com', 'change' : -20 },
{ 'name' : 'Homer', 'email' : 'home@simpsons.com', 'change' : 23 },
{ 'name' : 'Marge', 'email' : 'marge@simpsons.com', 'change' : -11 }
]},
proxy : {
type : 'memory',
reader : {
type : 'json',
root : 'items'
}
}
});

// update menu
var menuFilters = {
ftype: 'filters',
encode: false,
local: true,
filters: [
{
type: 'string',
dataIndex: 'name'
},
{
type: 'numeric',
dataIndex: 'change'
// value: {gt: 10} // sets menu, need to apply filter store .. see below
}
]
};

Ext.onReady(function(){

var grid = Ext.create('Ext.grid.Panel', {
title : 'Simpsons',
store : Ext.data.StoreManager.lookup('simpsonsStore'),
columns : [
{ header : 'Name', dataIndex : 'name' },
{ header : 'Email', dataIndex : 'email', flex : 1 },
{ header : 'Change', dataIndex : 'change' }
],

features: [ menuFilters ],

height : 200,
width : 400,
renderTo : Ext.getBody(),

tbar : [{
text: 'Filter Grid',
handler: function() {
var myFilters = [{
type: 'string',
dataIndex: 'name',
value: 'Homer'
},{
type: 'numeric',
dataIndex: 'change',
value: {gt: 10}
}];

grid.filters.addFilters(myFilters);
grid.filters.reload();
}
}]
});

// aply filter to store
// grid.store.filterBy(function(record,id){
// var found = record.get('change') > 10;
// return found;
// });

});


Scott.

Hanuchin
6 Mar 2013, 2:21 AM
Hello,

i was sick, so i could not answer before today.

If i take your code and add following data:

{ 'name' : 'Homer2', 'email' : 'home@simpsons.com', 'change' : 2 },


Then according to your filter value gt 10 this second Homer entry should not be shown.
But it is shown. The second filter is not active.

Is the second filter active on your example?

Thank you

Hanuchin
10 Mar 2013, 10:37 PM
it would be nice, if someone can check the given example.

It doesnt work like it should i think.