Ext.ux.grid.FilterBar plugin

[mpete]

Hi Leonardo,

I can't seem to figure out this autoStore thing.. I can see that the autoStores parameter is sent ,for every field with a filter, with the call for the store for the grid..

But how is the response supposed to be structured ?

I managed to get it working in another way, but this requires me to create a store for every combo in my grid manually.. (i have to know the name for the field..)

first I create the store:

//comboStore
var storeCombo = new Ext.data.JsonStore({
        proxy: {
            type: 'ajax',
            url: 'xDbColumn.xsp?field=status',
            reader: {
                root: 'data',
                totalProperty: 'count'                
            }
        },
        fields: [{
            name: 'id',
            type: 'string'
        }, {
            name: 'name',
            type: 'string'
        }],
        remoteFilter: true,
        autoLoad: true
});

Then I set the column store to this store:

{
	text     : 'Status',			                
	flex     : 0.5,
	dataIndex: '$Status',			                
	filter: {xtype: 'combobox',type: 'list',store: storeCombo,displayField: 'name',valueField: 'name',}
}

This works, but as you can see, I have to create a store for every combo manually in my code + I have to know the field name in order to send it along as a parameter in proxy url.

I was hoping for a more automatic way of doing this, hence the name autoStore.. I was kind of expecting these stores to be created automatically.

Do you have or know of any example on using remote combo stores in a more "automatic" way ?

Also, when I apply a filter, I get a horizontal scrollbar at the bottom. When all filters are removed, the scrollbar disappair. I'm using the actioncolumnpro action column plugin.

Any infomation would be greatly appreciated

Thanks for your help !

regards,
Petter Kjeilen

[Fioenix]

After changing the filter values at high speed, the filter data was missed. It only includes the last field. The phrase "changing at value at high speed" means that I typed in a field and move the cursor to another field before the filter is run.

12-4-2012 11-28-22 AM.png

I fix this problem temporarily by modifying the applyFilters function: scan all fields in me.fields.

    applyFilters: function (/*appliedField*/) {
        var me = this,
            grid = me.grid;
        me.filterArray = [];
        me.fields.each(function(field) {
            if (!field.isValid()) return;
            var column = me.columns.get(field.dataIndex),
                newVal = (grid.store.remoteFilter ? field.getSubmitValue() : field.getValue());...

However, it is not good in terms of performance. I would appreciate if you can suggest me any better solution. If you can, please help me.

[jimmylu98]

Fioenix,

I follow your steps ( http://www.sencha.com/forum/showthre...l=1#post917075 )
to make changes, but at the end the FilterBar is disappeared(see attached file). It must something is not correct. Could you please post your modified FilterBar.js as well as any related changed file. I am looking for the this for long time. Thank you for the help.

[jimmylu98]

Fioenix,

Looks like in your steps ( http://www.sencha.com/forum/showthre...l=1#post917075 ) missing:

        grid.addDocked( me.filterBar ); 

Two possible issues could come up:
(1) If one or more column filters are false, then filterBar fields will not align with header column. (see attached picture, here company name filter is false). May need add unfilterable column to me.filterBar.

(2) If one dataIndex used in two column, one filter is true, and the other filter is false, the results will both are filterable, since id: grid.id + '-filter-container-' + column.dataIndex. May need column index into id.

[langles]

I had a problem where parentheses appearing in filter text strings seemed to be ignored for filtering purposes. I discovered that they were being interpreted as regular expression grouping characters. After escaping the filter strings, they worked as expected.

Here's the code I modified inside the FilterBar.applyFilters() function:

                    case 'like' :
                        var escapedNewVal;
                        if (Ext.isArray(newVal)) {
                            escapedNewVal = newVal.map(Ext.String.escapeRegex);
                        } else {
                            escapedNewVal = Ext.String.escapeRegex(newVal);
                        }
                        filterFn = function(item) {
                            var re = new RegExp(escapedNewVal, 'i');
                            return re.test(item.get(column.dataIndex));
                        };
                        break;
                    case 'in' :
                        var escapedNewVal;
                        if (Ext.isArray(newVal)) {
                            escapedNewVal = newVal.map(Ext.String.escapeRegex);
                        } else {
                            escapedNewVal = Ext.String.escapeRegex(newVal);
                        }
                        filterFn = function(item) {
                            var re = new RegExp('^' + escapedNewVal.join('|')
                                            + '$', 'i');
                            return re.test((Ext.isEmpty(item
                                    .get(column.dataIndex))
                                    ? me.autoStoresNullValue
                                    : item.get(column.dataIndex)));
                        };
                        break;

[KajaSheen]

Hey,

very nice Plugin. Been playing around with it and noticed two little things:

OperatorButton gives an error, when the filterbar is destroyed before it was rendered. I.e. when part of a hidden tab or maybe even when renderHidden is true. Check if operatorButtonEl is already defined.

    onFieldDestroy: function() {
        var me = this;

        if(Ext.isDefined(me.operatorButtonEl)) {
            me.operatorButtonEl.destroy();
        }
        
        me.menu.destroy();
    }, 

Second I wanted to change the default operator for my date field to be gte, but the operator icon was still the eq one. Found that plugin OperatorButton does not set the operator (or eq is just assumed). Added the dperator from the column definition.

            if (me.enableOperators && (column.filter.type == 'date' || column.filter.type == 'int' || column.filter.type == 'float')) {
                plugins.push({
                    ptype: 'operatorbutton',
                    operator: column.filter.operator,
                    listeners: {
                        operatorchanged: function(txt) {
                            if (Ext.isEmpty(txt.getValue())) return;
                            me.applyInstantFilters(txt);
                        }
                    }
                });
            } 

[wki01]

Tested with 4.2 RC1

so it works

.....
        plugins: [
            Ext.create('Ext.grid.plugin.RowEditing', {
                clicksToMoveEditor: 1,
                autoCancel: false
            }), {
                ptype: 'filterbar',
                renderHidden: false
        }]
.....

so it NOT works

.....
        plugins: [{                
                ptype: 'filterbar',
                renderHidden: false
            },
            Ext.create('Ext.grid.plugin.RowEditing', {
                clicksToMoveEditor: 1,
                autoCancel: false
            })
        ]
.....

The error is (row = 104520):
Type Error: column.getEditor is not a function


thanks

[predator]

         } else {
-            grid.store.clearFilter();
-            if (me.clearAllEl) {
-                me.clearAllEl.hide({
-                    duration: 1000
-                });
+            //Added as it was causing the grid always to reload
+            if(grid.store.isFiltered()) {
+                grid.store.clearFilter();
+                if (me.clearAllEl) {
+                    me.clearAllEl.hide({
+                        duration: 1000
+                    });
+                }
             }
         }

[johanhaest]

Im having a problem that when I press enter in a filterfield, he sorts the column instead of filtering. Doesn't even come in the keypress event.

EDIT:

It's fixed when i uncommented these lines:

keydown: function(e) { e.stopPropagation(); },
keypress: function(e) { e.stopPropagation(); },
keyup: function(e) { e.stopPropagation(); }

Can anybody elaborate this?

[damo]

Excellent plugin!

One problem I'm having at the moment is that combos do not display correctly in IE6, the dropdown fills the whole screen and the clear button on the right of the filters doesn't show either, are these know issues as the market page does state IE6 support.

I've not had chance to debug it yet, thought i'd see if it was a known issue first.

Thanks,
Damo