Ext.ux.grid.HeaderFIlter

[SMMJ_Dev]

Good Morning/Afternoon/Evening Everyone,

I recently needed a filter for the columns that was not in the menu. So I created this plugin. The problem with the menu filter plugin was that we had a silverlight application along side our ExtJS Grid. When we used the ExtJS Menu, the menu would show up behind the silverlight application. I hope you enjoy it!

Example & Download: Ext.ux.grid.HeaderFilter

HeaderFilter.jpg

Tested in IE7/IE8/IE9/FF7/& Chrome 14

For IE I had to add this to the page:

if(Ext.isIE){Ext.enableGarbageCollector=false;}

The code can now be found on github: https://github.com/djengineerllc/Ext...d.HeaderFilter

[MeDavid]

Looking nice, good job!

[SMMJ_Dev]

Thank you, I just found an issue I will be fixing later tonight. When you move the columns, the filter is not moving with it. So I will get that up there tonight.

Here is the update if anyone needs it before tonight:

HeaderFilter.js:

Ext.define('Ext.ux.grid.HeaderFilter',{
	extend:'Ext.util.Observable',
	alias:'plugin.hfilter',
	uses:[
		'Ext.container.Container',
		'Ext.util.DelayedTask'
	],
	init:function(grid){
		var me=this;
		me.filterArray=[];
		grid.on({
			scope:me,
			afterrender:me.onGridRender,
			columnresize:me.onGridColumnResize,
			columnhide:me.onGridColumnHide,
			columnshow:me.onGridColumnShow,
			columnmove:me.onGridColumnMove
		});
		grid.addEvents('filterupdate');
	},
	updateBuffer:500,
	onGridColumnHide:function(headerCt,col){
		var filter=Ext.getCmp(col.id+"-filter");
		if(filter){filter.hide();}
	},
	onGridColumnShow:function(headerCt,col){
		var filter=Ext.getCmp(col.id+"-filter");
		if(filter){filter.show();}
	},
	onGridColumnResize:function(headerCt,col,width){
		var filter=Ext.getCmp(col.id+"-filter");
		if(filter){filter.setWidth(width);}
	},
	onGridColumnMove:function(headerCt,col,fromIdx,toIdx){
		var hFilter=headerCt.up('gridpanel').getDockedItems("#headerFilter")[0];
		hFilter.move(fromIdx,toIdx);
	},
	task:new Ext.util.DelayedTask(),
	onGridRender:function(grid,obj){
		var me=this;
		var container=Ext.create('Ext.container.Container',{
			dock:'top',
			id:'headerFilter',
			componentCls:'x-column-hfilter',
			weight:101,
			height:22,
			layout:'hbox'
		});
		Ext.each(grid.headerCt.items.items,function(item){
			item=Ext.getCmp(item.id);
			if(!item.filter){
				var col=Ext.create("Ext.container.Container",{
					layout:'fit',
					componentCls:'x-column-no-filter',
					height:container.height,
					id:item.id+"-filter",
					hidden:item.hidden,
					width:item.flex||item.width
				});
			}
			else{
				var col=item.filter;
				Ext.apply(col,{
					layout:'fit',
					componentCls:'x-column-filter',
					id:item.id+"-filter",
					hidden:item.hidden,
					width:item.flex||item.width,
					listeners:{
						scope:me,
						change:function(field,newVal,oldVal,eOpts){
							me.task.delay(me.updateBuffer,function(){
    							var newFilter={property:item.dataIndex,value:newVal},myIndex=-1;
    							Ext.Array.forEach(me.filterArray,function(item2,index,allItems){if(item2.property===item.dataIndex){myIndex=index;}},this);
    							if(myIndex!=-1){me.filterArray.splice(myIndex,1);}
    							if(newVal){me.filterArray.push(newFilter);}
    							grid.store.clearFilter();
    							if(me.filterArray.length>0){grid.store.filter(me.filterArray);}
    							else{grid.store.filterBy(function(){return true;});}
    						});
						}
					}
				});
			}
			container.add(col);
		});
		grid.dockedItems.add(container);
	}
});

[Allan]

Hi,

tried the demo but hit a couple of issues in FF 6.0.2 when filtering on the first column:

1. The header doesn't become bold italic or otherwise display the fact that the column is filtered.
2. There's no way to remove the filter other than reloading the page

I may be missing something here though :-)

Allan

[SMMJ_Dev]

Hi Allan,

I have not implemented any style changes. I can look into doing that. Also, I just selected the text and clicked delete to remove the filter. In the demo I just did a shortcut and used the same store for the combo filter as the grid filter. This is why there is nothing else to choose in the drop down to get rid of the filter. I can update the demo to use a separate store to show you.

[SMMJ_Dev]

Ok, the updates are made. I turned the combo into a clearable combo. I added a store with data for the combo. I added styles to filtered columns.

[wki01]

I would replace this piece of code.....

           grid.store.clearFilter();
           if(me.filterArray.length>0){grid.store.filter(me.filterArray);}
           else{grid.store.filterBy(function(){return true;});}

with:

          if(me.filterArray.length>0){
            grid.store.filter(me.filterArray);
           }
          else{
           grid.store.clearFilter()
          }

Otherwise it does not work correctly for remoteFilter: true

[SMMJ_Dev]

I would replace this piece of code.....

           grid.store.clearFilter();
           if(me.filterArray.length>0){grid.store.filter(me.filterArray);}
           else{grid.store.filterBy(function(){return true;});}

with:

          if(me.filterArray.length>0){
            grid.store.filter(me.filterArray);
           }
          else{
           grid.store.clearFilter()
          }

Otherwise it does not work correctly for remoteFilter: true

Thanks wki01 I will try that out.

[scottmartin]

In looking at your control, there are several items I would like to see if possible:

A clear button for each field (same as your clearable combo)
possibly displays a button only on hover.

A clear on the date would be very helpful if you do not add a clear button for each.

A 'clear all' to the far right of the filter column to clear all. (and/or function so we can clear all in code)

Option to filter on <enter> instead of keypress

Regards,
Scott.

[Christiand]

good work ! I like