Ext.ux.grid.FilterBar plugin

[jordandev]

renderExtraColumn seems to fail sometimes after reconfigure is called on the grid 4.2 now. It creates the header fine but the first column is missing so all the columns are shifted one over. If I scroll up and down it fixes itself.

This is with a buffered grid.

Anyone else get this?

[Steve88]

There is a little bug with date filter.
If you have null/empty date value in the store, during the application of the filter an error will occur:
"Uncaught TypeError: Cannot call method 'getTime' of null"

This can be easily corrected adding a if control before the applyFilters method (FilterBar.js, 666 row) return the item.

switch(operator) {
                    case 'eq':
                        filterFn = function(item) {
                            if (column.filter.type == 'date') {
                                var valore = item.get(column.dataIndex);
                                if(valore && valore !== null && valore != "") return Ext.Date.clearTime(item.get(column.dataIndex), true).getTime() == Ext.Date.clearTime(newVal, true).getTime();
                            } else {
                                return (Ext.isEmpty(item.get(column.dataIndex)) ? me.autoStoresNullValue : item.get(column.dataIndex)) == (Ext.isEmpty(newVal) ? me.autoStoresNullValue : newVal);
                            }
                        };
                        break;

Repeated of course for all operators.

Steve

[hansl1963]

Hello,

I'm using FilterBar successfully with Ext 4.1.3 but after upgrading to 4.2.0663 I get an error when loading the grid.

This is a part of the code im using:

Ext.define('sdmDataGridPanel', {
    extend: 'Ext.grid.Panel',

    forceFit: true,
    store: Ext.create('sdmDataStore'),
    
    plugins: [{
        ptype: 'filterbar',
        showShowHideButton: false,
        showClearAllButton: false
    }],
    
    id: 'grid',

.... 

And get the next error:

TypeError: result.push is not a function

result.push(item);

xt-all-debug.js (row 107050)

Hope somebody can help me..

[lelit]

That's probably the same problem reported in the message #134 in this thread (look at the previous page): you probably need to tweak a few lines in the source where there is a call to the function getGridColumns(true): simply remove the argument and it should work.

[hansl1963]

Thanks lelit,

I have been blind i think...
Going to tweak the files...

It works...

[landoni]

Thanks for this plugin, it's just what i was looking for.

I have a similar problem as mpete, i can´t populate my comboboxes when the grid store is set to "remoteFilter: true". Should i create a separate store for each combo? I'm just getting started in extjs 4, any example would be appreciated.

Thanks in advance,

Agustin

[langles]

I had an issue where there was a filter applied to my grid store on a column that is not displayed in the grid. The FilterBar plugin was ignoring this initial filter because of this line in the parseInitialFilters() function:

if (filter.property && !Ext4.isEmpty(filter.value) && me.columns.get(filter.property)) {

My fix was to add this inital filter to the me.filterArray even though it didn't satisfy the condition:

me.columns.get(filter.property)

Regards,

Scott Langley
slangley@scharp.org

[hschaefer123]

Thanks for the great pluging!

I am currently migrating from Ext 3.4 to 4.2.x and have to reimplement my CustomFilterBar needs.

I took this as the new foundation of my GridFilter.

Here are some comments on Bugs / things i needed to implement!

1) Render bug on using "renderHidden: false"

You have to replace afterender event by viewready
//grid.on('afterrender', me.renderFilterBar, me, { single: true });
grid.on('viewready', me.renderFilterBar, me, { single: true });

this should solve the problem with hidden columns and filters initially shown

2) applyFilters
i disabled delay for filters triggered by RETURN Key (also for remote loading).
Formerly i do not used change event, but this way it works quite well.
I think delaying during typing is ok, but you do not want to wait using RETURN KEY

//applyFilters: function(field, newVal) {
applyFilters: function(field, newVal, oldValue, eOpts) {

...
var delay = (!eOpts) ? 10 : me.updateBuffer;
//me.task.delay(me.updateBuffer, function() {
me.task.delay(delay, function() {

3) Info's / debud output on things that corrupts MixedCollections on duplicate keys:
parseFiltersConfig:...
generally i changed the default behavior that each column will have a autoFilter.
If i do not want a column filtered, i have to add filter: false.
Using Sencha Architect this is more comfortabel, because i do not have to add a custom config property for each column!

...
        Ext.each(columns, function(column) {
            if (column.filter || column.dataIndex && column.filter !== false) {
                if (!column.filter || column.filter === true || column.filter === 'auto') { // automatic types configuration (store based)
                	var modelField = me.grid.store.model.prototype.fields.get(column.dataIndex);
                    //var type = me.grid.store.model.prototype.fields.get(column.dataIndex).type.type;
                	if (modelField) {
                		var type = modelField.type.type;
                		if (type == 'auto') type = 'string';
                		column.filter = type;
                	} else {
                		column.filter = 'string';
                		console.log('Grid FilterBar warning! invalid dataIndex "' + column.dataIndex + '" for column "' + column.text + '"');
                	}
                }

I also added warnings for missing column.DataIndex

At the end i added code for checking on duplicate keys and log a warning

                if (!me.columns.containsKey(column.dataIndex))
                	me.columns.add(column.dataIndex, column);
                else
                	console.log('Grid FilterBar warning! Duplicate dataIndex "' + column.dataIndex + '" for column "' + column.text + '"');

I also added lot's of things around using glyphs / pictos from FontAwesome and so on to have a nice UI, but the interesting things for the common are mentioned above!

You also have add the things mentioned formerly in this thread like
- use getGridColumns() instead getGridColumns(true)

Maybe this is a little timesave for you.

Cheers Holger

[lelit]

Leonardo, any chance of putting a version of the plugin on some public versionated site, such as github or bitbucket, where contributions like Holger's, and in general simple fixes, would be simpler to track?

[anirudh.chhabra]

Hi,

First of all, absolutely great plugin. Great job !

I am trying to use this plugin - works well for me in normal scenario, but I run into some issues with certain scenarios.

I am using Ext JS version 4.2.1 (already changed getGridColumns(true) to getGridColumns(). Now, here is the scenario:

1. It works well if I try to reconfigure the grid without any locked columns
2. To handle columns, I have defined following in my grid config:

		normalGridConfig: {
		plugins: [{
			ptype: 'filterbar',
			renderHidden: false,
			showShowHideButton: true,
			showClearAllButton: true
		}]
		},
		lockedGridConfig: {
			plugins: [{
				ptype: 'filterbar',
				renderHidden: false,
				showShowHideButton: true,
				showClearAllButton: true
			}]
		},

This works fine for the first time ie when the grid is not reconfigured yet.

Once I reconfigure the grid, I get the following error:
this.grid.headerCt.getColumns is undefined

I just tried to update all references of

headerCt.getColumns 

with

var headerCt = this.grid.headerCt?this.grid.headerCt:this.grid.normalGrid.headerCt?this.grid.normalGrid.headerCt:this.grid.lockedGrid.headerCt;        var columns = headerCt.getGridColumns(); 

Not sure if that's teh correct way, but at least I didn't get the headerCt error. But when I reconfigure the grid, I do not see the grid filters.

Will really appreciate your help on this one.

Thanks,
Ani