Grid header filters

[yumusakg]

is there a demo page for this plugin?
this link http://84.253.168.37:8090/w2p/docs.html does not work..

[ob1]

You add "getHeaderFilterField" as a function of the grid, but the named parameter "sFn" is inconsistent with the usage inside the function which refers to "fn", not "sFn".

Calling this function is guaranteed to explode

[yumusakg]

autoexpand column does not resize when a hidden column made visible. this needs to be fixed.

[sdc53]

d.zucconi,
I'm having a difficult time getting your plugin to work - using GridHeaderFilters 1.09 on Ext 3.1.1. The filters do not appear under the column headers in the grid. Someone else commented on a similar problem - resolution was "filters not being set". I've verified in Firebug they are there. I've spent a day trying to figure it out and am now resorting to a lowly forum post. Any suggestions?

[sdc53]

I figured out the answer to my own problem - I was trying to use a BufferGridView, as soon as I switched to the default type the header row appeared.

[dolittle]

When using combobox filters resetHeaderFilters doesn't clear them.
Instead, it set the value to the first item in the list.
I modified the reset function to take care of that:

this.grid.resetHeaderFilters = function(bReload)
{
	if(!this.headerFilters)
		return;
	if(arguments.length == 0)
		var bReload = true; 
	for(var fn in this.headerFilters.filterFields)
	{
		var el = this.headerFilters.filterFields[fn];
		if(el.clearValue) {
			el.clearValue();
		} else {
			this.headerFilters.setFieldValue(el, "");
		}
		this.headerFilters.applyFilter(el, false);
	}
	if(bReload)
		this.headerFilters.storeReload();
};

[dzj]

I have modified something:

//Pannello filtri
var filterPanelDiv = headerTd.createChild({id: Ext.id(), tag: "div"});
filterPanelDiv.setHeight(this.height);
var panelConfig = {
/*id: "filter-panel-"+colCfg.id,*/
renderTo: filterPanelDiv,
width: iPanelWidth,
height: this.height,
border: false,
//bodyStyle: "background-color: transparent; padding: 2px",
bodyStyle: "padding: " + this.padding + "px; background-color: transparent",
bodyBorder: false,
layout: "fit",
items: [],
stateful: false
};

//applyMode: auto o enter
if(this.applyMode == "auto" || this.applyMode == "change" || Ext.isEmpty(this.applyMode))
{
filterConfig.listeners =
{
change: function(field){
var t = field.getXType();
if(t=='combo' || t=='datefield'){ //avoid refresh twice for combo select
return;
}else{
this.applyFilter(field);
}
},
specialkey: function(el,ev)
{
ev.stopPropagation();
if(ev.getKey() == ev.ENTER)
//el.el.dom.blur();
this.applyFilters();
},
select: function(field){this.applyFilter(field);},
scope: this
};
}

[d.zucconi]

You add "getHeaderFilterField" as a function of the grid, but the named parameter "sFn" is inconsistent with the usage inside the function which refers to "fn", not "sFn".

Calling this function is guaranteed to explode

Thanks for your report. The bug is now fixed in 1.0.12.

[d.zucconi]

When using combobox filters resetHeaderFilters doesn't clear them.
Instead, it set the value to the first item in the list.
I modified the reset function to take care of that:

this.grid.resetHeaderFilters = function(bReload)
{
	if(!this.headerFilters)
		return;
	if(arguments.length == 0)
		var bReload = true; 
	for(var fn in this.headerFilters.filterFields)
	{
		var el = this.headerFilters.filterFields[fn];
		if(el.clearValue) {
			el.clearValue();
		} else {
			this.headerFilters.setFieldValue(el, "");
		}
		this.headerFilters.applyFilter(el, false);
	}
	if(bReload)
		this.headerFilters.storeReload();
};

Thanks for your suggestion. I've updated this function in version 1.0.12 of GridHeaderFilters plugin.

[d.zucconi]

I have modified something:

//Pannello filtri
var filterPanelDiv = headerTd.createChild({id: Ext.id(), tag: "div"});
filterPanelDiv.setHeight(this.height);
var panelConfig = {
/*id: "filter-panel-"+colCfg.id,*/
renderTo: filterPanelDiv,
width: iPanelWidth,
height: this.height,
border: false,
//bodyStyle: "background-color: transparent; padding: 2px",
bodyStyle: "padding: " + this.padding + "px; background-color: transparent",
bodyBorder: false,
layout: "fit",
items: [],
stateful: false
};

//applyMode: auto o enter
if(this.applyMode == "auto" || this.applyMode == "change" || Ext.isEmpty(this.applyMode))
{
filterConfig.listeners =
{
change: function(field){
var t = field.getXType();
if(t=='combo' || t=='datefield'){ //avoid refresh twice for combo select
return;
}else{
this.applyFilter(field);
}
},
specialkey: function(el,ev)
{
ev.stopPropagation();
if(ev.getKey() == ev.ENTER)
//el.el.dom.blur();
this.applyFilters();
},
select: function(field){this.applyFilter(field);},
scope: this
};
}

Thanks for your suggestion: I've added the "padding config" and "change listener" updates to the latest version of plugin code. In this version I've also added the "applyFilterEvent" configuration for each filter field that allow user to select the event to listen for filter application.
However in my apps I always use applyMode = "enter": is the most appreciated by users.