1. #1
    Ext JS Premium Member SMMJ_Dev's Avatar
    Join Date
    Aug 2009
    Location
    St. Louis, MO
    Posts
    88
    Vote Rating
    0
    SMMJ_Dev will become famous soon enough

      0  

    Default Ext.ux.grid.HeaderFIlter

    Ext.ux.grid.HeaderFIlter


    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:
    Code:
    if(Ext.isIE){Ext.enableGarbageCollector=false;}
    The code can now be found on github: https://github.com/djengineerllc/Ext...d.HeaderFilter
    Last edited by SMMJ_Dev; 25 Sep 2011 at 8:44 AM. Reason: Adding browsers that I have tested this in.
    ExtJS 4.0 - Ext.ux.grid.FooterSummary (Coming Soon)
    ExtJS 4.0 - Ext.ux.form.field.IPhoneSwitch (Coming Soon)
    ExtJS 4.0 - Ext.ux.grid.HeaderFilter
    (Updates Coming Soon)
    ExtJS 4.0 - Ext.ux.menu.DynamicMenu

    ExtJS 4.0 - Ext.ux.form.field.ClearableCombo
    ExtJS 4.0 - Ext.ux.form.field.FormPanelEditor
    ExtJS 4.0 - Grouping Extra Features (Overrides) (Updates Coming Soon)

  2. #2
    Ext JS Premium Member
    Join Date
    May 2007
    Posts
    64
    Vote Rating
    0
    MeDavid is on a distinguished road

      0  

    Default nice work

    nice work


    Looking nice, good job!

  3. #3
    Ext JS Premium Member SMMJ_Dev's Avatar
    Join Date
    Aug 2009
    Location
    St. Louis, MO
    Posts
    88
    Vote Rating
    0
    SMMJ_Dev will become famous soon enough

      0  

    Default


    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:
    Code:
    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);
    	}
    });
    ExtJS 4.0 - Ext.ux.grid.FooterSummary (Coming Soon)
    ExtJS 4.0 - Ext.ux.form.field.IPhoneSwitch (Coming Soon)
    ExtJS 4.0 - Ext.ux.grid.HeaderFilter
    (Updates Coming Soon)
    ExtJS 4.0 - Ext.ux.menu.DynamicMenu

    ExtJS 4.0 - Ext.ux.form.field.ClearableCombo
    ExtJS 4.0 - Ext.ux.form.field.FormPanelEditor
    ExtJS 4.0 - Grouping Extra Features (Overrides) (Updates Coming Soon)

  4. #4
    Ext JS Premium Member
    Join Date
    Jan 2008
    Posts
    88
    Vote Rating
    0
    Allan is on a distinguished road

      0  

    Default


    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

  5. #5
    Ext JS Premium Member SMMJ_Dev's Avatar
    Join Date
    Aug 2009
    Location
    St. Louis, MO
    Posts
    88
    Vote Rating
    0
    SMMJ_Dev will become famous soon enough

      0  

    Default


    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.
    ExtJS 4.0 - Ext.ux.grid.FooterSummary (Coming Soon)
    ExtJS 4.0 - Ext.ux.form.field.IPhoneSwitch (Coming Soon)
    ExtJS 4.0 - Ext.ux.grid.HeaderFilter
    (Updates Coming Soon)
    ExtJS 4.0 - Ext.ux.menu.DynamicMenu

    ExtJS 4.0 - Ext.ux.form.field.ClearableCombo
    ExtJS 4.0 - Ext.ux.form.field.FormPanelEditor
    ExtJS 4.0 - Grouping Extra Features (Overrides) (Updates Coming Soon)

  6. #6
    Ext JS Premium Member SMMJ_Dev's Avatar
    Join Date
    Aug 2009
    Location
    St. Louis, MO
    Posts
    88
    Vote Rating
    0
    SMMJ_Dev will become famous soon enough

      0  

    Default


    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.
    ExtJS 4.0 - Ext.ux.grid.FooterSummary (Coming Soon)
    ExtJS 4.0 - Ext.ux.form.field.IPhoneSwitch (Coming Soon)
    ExtJS 4.0 - Ext.ux.grid.HeaderFilter
    (Updates Coming Soon)
    ExtJS 4.0 - Ext.ux.menu.DynamicMenu

    ExtJS 4.0 - Ext.ux.form.field.ClearableCombo
    ExtJS 4.0 - Ext.ux.form.field.FormPanelEditor
    ExtJS 4.0 - Grouping Extra Features (Overrides) (Updates Coming Soon)

  7. #7
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    293
    Vote Rating
    3
    wki01 is on a distinguished road

      0  

    Default


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

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

    Code:
              if(me.filterArray.length>0){
                grid.store.filter(me.filterArray);
               }
              else{
               grid.store.clearFilter()
              }
    Otherwise it does not work correctly for remoteFilter: true

  8. #8
    Ext JS Premium Member SMMJ_Dev's Avatar
    Join Date
    Aug 2009
    Location
    St. Louis, MO
    Posts
    88
    Vote Rating
    0
    SMMJ_Dev will become famous soon enough

      0  

    Default


    Quote Originally Posted by wki01 View Post
    I would replace this piece of code.....

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

    Code:
              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.
    ExtJS 4.0 - Ext.ux.grid.FooterSummary (Coming Soon)
    ExtJS 4.0 - Ext.ux.form.field.IPhoneSwitch (Coming Soon)
    ExtJS 4.0 - Ext.ux.grid.HeaderFilter
    (Updates Coming Soon)
    ExtJS 4.0 - Ext.ux.menu.DynamicMenu

    ExtJS 4.0 - Ext.ux.form.field.ClearableCombo
    ExtJS 4.0 - Ext.ux.form.field.FormPanelEditor
    ExtJS 4.0 - Grouping Extra Features (Overrides) (Updates Coming Soon)

  9. #9
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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.

  10. #10
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Montréal, Canada
    Posts
    221
    Vote Rating
    5
    Christiand is on a distinguished road

      0  

    Default


    good work ! I like