Ext.ux.grid.FilterBar plugin

[mpete]

Hi Leonardo,

I tried using filter: {type: 'list', listConfig: {width: 500}} , but I cannot see any difference in the rendered combobox. The "dropdown" box/list is still the same width as the field.
I was expecting the "dropdown" box/list to be wider than the field it self..
I might be doing this the wrong way ?

Image:
combobox.png



Here's my code:

				// create the Grid
			    var grid = Ext.create('Ext.grid.Panel', {
			        store: store,
					plugins: [{
			        	ptype: 'filterbar',
			        	renderHidden: false,
			        	showShowHideButton: true,
			        	showClearAllButton: true
					}],
			        columns: {
						plugins: [{
							ptype: 'gridautoresizer'
						}],
			        	items: [{
			        		text	  : 'Nr.',
			        		widht	  : 40,
							dataIndex : '$MeldNr',
			        		filter	  : {
			        			type: 'int',
			        			minValue: 1
							}
						},
			            {
			                text     : 'Bestiller',
			                flex     : 0.5,
			                dataIndex: '$KundeNavn',
			                filter: {type: 'list', listConfig: {width: 500}}
			            },
			            {
			                text     : 'Ansvarlig',
			                flex     : 0.5,
			                dataIndex: '$Ansvarlig',
			                filter: {type: 'list', listConfig: {width: 500}}
			            },
			            {
			                text     : 'Leveranseansvarlig',
			                flex     : 0.5,
			                dataIndex: '$Leveranseansvarlig',
			                filter: {type: 'list', listConfig: {width: 500}}
			            },
			            {
			                xtype: 'actioncolumnpro',
			                items: [{
			                    iconCls: 'domino',
			                    tooltip: 'Open in Notes client',			                           
			                    handler : function(grid, rowIndex, colIndex) {
			                    var rec = store.getAt(rowIndex);
			                    var docunid = rec.get('@unid');			                    
			                    window.open(notesurl+docunid, '_blank');			                    
       							}
			                }]
			            }
			        	],
			        },
					dockedItems: [{
						dock: 'top',
						xtype: 'toolbar',
						items: [{
							iconCls: 'add',
							text: 'Ny oppgave',
							disabled: false,                    
							handler : function() {
								//alert('coming soon..');
								Ext.MessageBox.show({
								title: 'Info',
								msg: 'Scheduled for next version...',
								buttons: Ext.MessageBox.OK,           				
								icon: Ext.MessageBox.INFO
								});	
							}
						},'->', {
							xtype: 'component',
							itemId: 'status',
							tpl: 'Displaying {count} tasks',
							style: 'margin-right:5px'
						},'->',{
							iconCls: '',
							text: currentuser,
							disabled: true               
						}]
					}],
						features: [groupingFeature],						
						title: "<a style='cursor:pointer;' href='Notes://DSNotes1/C12572B40034A57D/'><img src='Logo.png'/></a>",						
						viewConfig: {
			            stripeRows: true,
			            loadingText: gridLoadingText
			        }
			    });

Thanks for your help !

regards,
Petter Kjeilen

[ldonofrio]

Predator,

I'll look into that

If i may suggest to apply delay for the select event on the list filters, as it is currently set as instant and does not gives the user a chance to set multi choice.

select: me.applyDelayedFilters, //original select: me.applyInstantFilters, 

[ldonofrio]

Petter,
You've to use matchFieldWidth: false (defaults to true) check the docs http://docs.sencha.com/ext-js/4-1/#!...atchFieldWidth

And for multiSelect checkbox combo use this
js override

// change list base css classes to support checkbox in multiSelect: true
Ext.define('Ext.override.form.field.ComboBox', {
    override: 'Ext.form.field.ComboBox',
    constructor: function(config) {
        if (Ext.isDefined(config.multiSelect)) {
            if (config.multiSelect) {
                if (!Ext.isObject(config.listConfig)) config.listConfig = {};
                config.listConfig.baseCls = Ext.baseCSSPrefix + 'checkboundlist';
                config.listConfig.itemCls = Ext.baseCSSPrefix + 'checkboundlist-item';
            }
        }
        this.callParent([config]);
    }
});

sass override

// multiSelect combos
$tmpprefix: $prefix;
$prefix: 'x-check';
@include extjs-boundlist;
.#{$prefix}boundlist-item {
    padding: 2px;
    padding-left: 18px;
    background-image: theme-image($theme-name, $menu-icon-unchecked);
    background-repeat: no-repeat;
}


.#{$prefix}boundlist-selected {
    background-image: theme-image($theme-name, $menu-icon-checked);
    background-repeat: no-repeat;
}
$prefix: $tmpprefix;

[ldonofrio]

I've changed that in my working copy only for multiSelect:true combo filters.
Thanks

For now you can use this to patch the plugin:

					select: function(txt) {
						if (txt.multiSelect) {
							me.applyDelayedFilters(txt);
						} else {
							me.applyInstantFilters(txt);
						}
					},

If i may suggest to apply delay for the select event on the list filters, as it is currently set as instant and does not gives the user a chance to set multi choice.

select: me.applyDelayedFilters, //original select: me.applyInstantFilters, 

[mpete]

Hi Leonardo,

Thanks, that worked out very well

Now I have a few new questions..

First, I´ve implemented remote sorting and filtering on my store because it took to long to filter 3000 records locally. remoteFilter is now set to true.
But, then I experience that alle the combos and lists are no longer populated with values.
Do I also have to build the values for these fields on the server now ? Or is that an option ?
If, I have to build the list of values on the server, how do I config my extjs code to do this ?

Second, when filtering a date field I can choose like, greater than, smaller than, unlike for comparison. But, I can only choose 1 type of comparison at 1 time. Is is e.g possible to filter a datefield with date greater than + date smaller than ?
Same for a number field.

Thanks again for your help

regards,
Petter

[ldonofrio]

Petter,
1) For 3000 records i think you need server paging, and this way have no sense to build the lists in the client because you doesn't have all posible values, so you have to do it in the server side, look at the code for "autoStoresRemoteProperty" config option, it defaults to "autoStores" so you have to include that key with the arrays in the server response.
Take a look at "fillAutoStores" private method that build the stores based on that property in the response.
Also "autoStoresRemoteProperty" is used in the request to notify the server what fields you need to collect unique values.

2) No there is no way, i've no implemented number/date ranges

Regards
Leonardo

Hi Leonardo,

Thanks, that worked out very well

Now I have a few new questions..

First, I´ve implemented remote sorting and filtering on my store because it took to long to filter 3000 records locally. remoteFilter is now set to true.
But, then I experience that alle the combos and lists are no longer populated with values.
Do I also have to build the values for these fields on the server now ? Or is that an option ?
If, I have to build the list of values on the server, how do I config my extjs code to do this ?

Second, when filtering a date field I can choose like, greater than, smaller than, unlike for comparison. But, I can only choose 1 type of comparison at 1 time. Is is e.g possible to filter a datefield with date greater than + date smaller than ?
Same for a number field.

Thanks again for your help

regards,
Petter

[reweiner]

Hi Leonardo,

Thanks for the great work.

I think I might have found a problem.

I'm using 'reconfigure' in my grid. One grid I want to have the FilterBar and another one I don't. So I setup 'filter: true' in the columns I want.

Then it renders the filter with no FilterBar -> OK
When I fire the reconfigure event for the new columns with the FilterBar it 'crashes' on function 'renderFilterBar' (around line 530):

var container = Ext.create('Ext.container.Container', 
{
                dataIndex: key,
                layout: 'hbox',
                bodyStyle: 'background-color: "transparent";',
--->                width: column.getWidth(),
                items: [field],
                listeners: {
                    scope: me,
                    element: 'el',
                    mousedown: function(e) { e.stopPropagation(); },
                    click: function(e) { e.stopPropagation(); },
                    dblclick: function(e) { e.stopPropagation(); },
                    keydown: function(e) { e.stopPropagation(); },
                    keypress: function(e) { e.stopPropagation(); },
                    keyup: function(e) { e.stopPropagation(); }
                }
            }); 

I don't know exactly why but I believe is due to the FilterBar has not been displayed yet.

Thanks
R.

[gayathr]

Great Plugin .It helps me a lot Thanks a lot

[alessiom]

Hi all.
Thank you very much for the plugin! It is exactly what we were looking for.
I have implemented date and number ranges.
Here is the diff

--- FilterBarOriginal.js    2012-11-29 09:22:14.000000000 +0100
+++ FilterBar.js    2012-11-29 09:45:57.000000000 +0100
@@ -542,13 +542,43 @@
                 },
                 plugins: plugins
             }));
+            if (column.range && ((column.filter.xtype == 'datefield') || (column.filter.xtype == 'numberfield'))) {
+                var field2 = Ext.widget(column.filter.xtype, Ext.apply(column.filter, {
+                    dataIndex: key,
+                    flex: 1,
+                    margin: 0,
+                    fieldStyle: 'border-left-width: 0px; border-bottom-width: 0px;',
+                    listConfig: listConfig,
+                    preventMark: true,
+                    msgTarget: 'none',
+                    checkChangeBuffer: 50,
+                    enableKeyEvents: true,
+                    listeners: {
+                        change: me.applyDelayedFilters,
+                        select: me.applyInstantFilters,
+                        keypress: function(txt, e) {
+                            if (e.getCharCode() == 13) {
+                                e.stopEvent();
+                                me.applyInstantFilters(txt);
+                            }
+                            return false;
+                        },
+                        scope: me},
+                        plugins: plugins
+
+                }));
+                var items = [field, field2];
+            } else {
+                var items = [field];
+            }
             me.fields.add(column.dataIndex, field);
+            me.fields.add(column.dataIndex, field2);
             var container = Ext.create('Ext.container.Container', {
                 dataIndex: key,
                 layout: 'hbox',
                 bodyStyle: 'background-color: "transparent";',
                 width: column.getWidth(),
-                items: [field],
+                items: items,
                 listeners: {
                     scope: me,
                     element: 'el',
@@ -675,7 +705,7 @@
         }
         var myIndex = -1;
         Ext.each(me.filterArray, function(item2, index, allItems) {
-            if(item2.property === column.dataIndex) {
+            if (item2.id === ('filter-' + field.id)) {
                 myIndex = index;
             }
         });
@@ -738,12 +768,14 @@
                 }
                 me.filterArray.push(Ext.create('Ext.util.Filter', {
                     property: column.dataIndex,
+                    id: 'filter-' + field.id,
                     filterFn: filterFn,
                     me: me
                 }));
             } else {
                 me.filterArray.push(Ext.create('Ext.util.Filter', {
                     property: column.dataIndex,
+                    id: 'filter-' + field.id,
                     value: newVal,
                     type: column.filter.type,
                     operator: (field.operator || column.filter.operator) 

To use the range just add a "range: true" option to the column definition and a couple of field will appear under the column header. The appear awful (especially the date fields), but they work. Corrections and suggestions are welcome, of course.

Just a question: could you please explain how to populate lists and combos in case of remote filtering? I have studied the code (and I will continue to), but I did not understood.

Regards.

Alessio

[Fioenix]

I'm sorry. My English isn't good ^^

There is an issue of showing when we use the grid with group-headers:

12-1-2012 11-22-04 AM.jpg

I referred to http://www.sencha.com/forum/showthre...rid.xFilterRow. I think that moving the filter containers to a filter bar is a better solution.

I tried editing FilterBar.js by replacing me.containers with the filter bar:

Replaces:

me.containers = Ext.create('Ext.util.MixedCollection');

with:

        me.filterBar = Ext.create('Ext.container.Container', {  // adds a filter bar to grid            id: grid.id + '-filter-bar',
            weight: 100,
            height: 23,
            dock: 'top',
            border: true,
            baseCls: Ext.baseCSSPrefix + 'grid-header-ct',
            style: 'border-top-color: #c5c5c5;',
            layout: {
                type: 'hbox'
            }
        });

Replaces:

        me.containers.each(function(item) {            Ext.destroy(item);
        });
        me.containers.clear();
        me.containers = null;

with:

        // Filter bar        me.filterBar.removeAll();
        me.filterBar = null;

Replaces:

me.containers.clear();

with:

me.filterBar.removeAll();

Replaces:

var container = Ext.create('Ext.container.Container', {

with:

            var container = Ext.create('Ext.container.Container', {                id: grid.id + '-filter-container-' + column.dataIndex,
                baseCls: Ext.baseCSSPrefix + 'column-header',

Replaces:

            me.containers.add(column.dataIndex, container);
            container.render(Ext.get(column.id));

with:

me.filterBar.add(container);    // adds the container to filterBar

Replaces:

var item = me.containers.get(dataIndex);

with:

var item = me.filterBar.getComponent(me.grid.id + '-filter-container-' + dataIndex);

Replaces:

        me.containers.each(function(item) {            item.setVisible(visible);
        });

with:

me.filterBar.setVisible(visible);

This is the result:

12-1-2012 1-31-30 PM.jpg