Grid header filters

[hankin]

When I move columns I am noticing that the original div tag that defined the height is not being removed. Which, is making the header have twice the height it should. I think it happening because this.panels[co.dataIndex] = this.createFilterPanel(co, this.grid); is being called on both renders and on column moves. Does anybody have a solution for this?

onRender: function()
{
if(!this.filters)
this.filters = {};

this.filterFields = {};

//Elimino pannelli esistenti
for(var pId in this.panels)
{
if((this.panels[pId] != null) && (Ext.type(this.panels[pId].destroy) == "function"))
this.panels[pId].destroy();
}
this.panels = [];

this.cm = this.grid.getColumnModel();
this.gridView = this.grid.view;
this.headTr = Ext.DomQuery.selectNode("tr",this.gridView.mainHd.dom);
this.headerCells = Ext.query("td",this.headTr);

var cols = this.cm.getColumnsBy(function(){return true});
for ( var i = 0; i < cols.length; i++)
{
var co = cols[i];
this.panels[co.dataIndex] = this.createFilterPanel(co, this.grid);
}
//Evidenza filtri se almeno uno attivo
this.highlightFilters(this.isFiltered());

},

[d.zucconi]

Hi,

The problem of duplicated divs on column move is solved with the latest version (1.0.5):
In this version the function createFilterPanel has been modified to avoid use of new DIVs and render filter panel directly into the header table cell.
So if you move the column, the panel will be destroyed and re-created (without supporting DIVs).

createFilterPanel: function(colCfg, grid)
  {
		// = this.cm.findColumnIndex(colCfg.dataIndex);
		//Thanks to dzj
		var iColIndex = this.cm.getIndexById(colCfg.id);
    	        //var headerTd = Ext.get(this.gridView.getHeaderCell(iColIndex));
		var headerTd = Ext.get(this.headerCells[iColIndex]);
		//Patch for field text selection on Mozilla
		if(Ext.isGecko)
			headerTd.dom.style.MozUserSelect = "text";
		//var filterPanelDiv = headerTd.createChild({id: Ext.id(), tag: "div"});
		//filterPanelDiv.setHeight(this.height);
		var filterPanel = null;
			
		if(colCfg.filter)
    	{
				var iColWidth = this.cm.getColumnWidth(iColIndex);
				var iPanelWidth = iColWidth - 2;
				
				//Pannello filtri
				var panelConfig = {
						/*id: "filter-panel-"+colCfg.id,*/
						renderTo: headerTd, 
						width: iPanelWidth,

See first page of this thread to get the full code.

[hankin]

Thanks that was a lot cleaner than the solution I came up with. I was searching and finding the old div than deleting it. Rendering the new div to that old div is way cleaner.

[el_crespo]

Hello!! thanks for the extension.. but I have a question: ¿this works with EditorGridPanel and ext 3.0?
sorry for my English!!

Edit:

Now I Know that this works with EditorGridPanel and ext 3.0 but does not work if the grid have the next cod:

viewConfig  : {
                          autoFill   : true,
                          forceFit   : false
                      }

[captainkebab]

Great work!

But I have one problem: I use several combo-box filters and when I change their value the store gets reloaded two times.
The first time on clicking the item in the combo box and a second time when I "leave" the combo box by clicking on another filter or the page background. This is a little anoying.

So a check, if the value of the filter has changed since the last reload would be useful.
This could also prevent from reloading the store, when you click on the combo-box item that is already selected.

Any help would be appreciated.

[calavera]

Does this work with ExtJS 3 ?

Thanks.

[d.zucconi]

Does this work with ExtJS 3 ?

Thanks.

Yes, since version 1.0.5

[d.zucconi]

Great work!

But I have one problem: I use several combo-box filters and when I change their value the store gets reloaded two times.
The first time on clicking the item in the combo box and a second time when I "leave" the combo box by clicking on another filter or the page background. This is a little anoying.

So a check, if the value of the filter has changed since the last reload would be useful.
This could also prevent from reloading the store, when you click on the combo-box item that is already selected.

Any help would be appreciated.

With version 1.0.6 you can use config parameter

applyMode: 'enter'

and add an "apply filters" button to your grid tbar to call "applyHeaderFilters" method (enabled in the grid by the plugin) to allow the user to choose when filters values are ready to be applied...

[nickweavers]

Brilliant plugin!

I'm fairly new to this so please excuse me if I am missing a trick here and making this far more complicated than it needs to be.

When doing server side sorts, I see that I am getting the name of the dataIndex field as the key in $_POST along with the filter string as the value. Eg $_POST['last_name']='smith'. There doesn't seem to be any easy way for me to recognise this field as a filter.

To make it easier to plug straight into a server side query it would be nice if it were sent as something like a list of key/value pairs, one for the name of the field, and the other for its filter string, eg

$_POST['filter']=[
{field: 'first_name', value: 'john'},
{field: 'last_name', value: 'smith'}]

This way I can easily json_decode() the $_POST and iterate over the resulting array to build the filter part of my sql query.

Or is there a simple way for me to figure out what $_POST['last_name']='smith' was sent for?

TIA,
Nick.

[alien3d]

I build php code for filtering and make searching like this in normal form.This code below is for php if anybody want to implement searching via sql.I will test this night this extension if work with my current application php.At first i tough want to used grid filter.Found this more better lor.

<?php
	function search_javascript($variable_array) { 
		print"var url;\n";
		print"url=\"".basename($_SERVER['PHP_SELF'])."?&search=1&mode=".$_GET['mode']."&sn=".$_GET['sn']."&action=".$_GET['action']."&id=\";\n";
		foreach($variable_array as $variable_javascript) { 
			echo "var ".$variable_javascript.";\n";
			echo $variable_javascript."=document.contractor_enquiry_form.".$variable_javascript.".value;\n"; 
			echo "if(".$variable_javascript.".length        > 0 ) { url=url+\"&".$variable_javascript."=\"+escape(".$variable_javascript."); } \n";
		}
		print"window.location.replace(url);\n";
	}
	
	function searching_text($string) { 
		$pos = strpos("~", $string);
		if ($pos === false) { 
			return explode("~",$string); 
		} 
	}
	
	function searching_text1($string) { 
		$pos = strpos(",", $search);
		if ($pos === false) {  
			return explode(",",$string); 
		} 
	}
	
	function searching_equal($string) { 
		$pos = strpos($string, $search);
		if ($pos === false) {  
			return explode("=",$string); 
		} 
	}
	
	function searching_lt($string) { 
		$pos = strpos($string, $search);
		if ($pos === false) { 
			$value=explode("<=",$string); 
			if(count($value)== 2) { 
				return "lt"; 
			} else { 
				return 'N'; 
			}
		} else { 
			return 'N'; 
		}  
	}
	
	function searching_mt($string) { 
		$pos = strpos(">=", $search);
		if ($pos === false) { 
			$value=explode(">=",$string);
			if(count($value)== 2) { 
				return "mt"; 
			}	else { 
				return 'N'; 
			} 
		} else { 
			return 'N'; 
		} 
	}
	
	function searching_l($string) { 
		$pos = strpos("<", $search);
		if ($pos === false) { 
			$value=explode("<",$string);
			if(count($value)== 2) { 
				return "l"; 
			}	else { 
				return 'N'; 
			}
		} else { 
			return 'N'; 
		}  
	}
	
	function searching_m($string) { 
		$pos = strpos(">", $search);
		if ($pos === false) { 
			$value=explode(">",$string);
			if(count($value)== 2) {  
				return "m"; 
			}	else { 
				return 'N'; 
			} 
		} else { 
			return 'N'; 
		}  
	}
	
	function search_mode($sql,$table,$fieldname,$value,$datatype) {
		$value=trim($value);
		list($value1,$value2)=searching_text($value);
		if(!empty($value1) && !empty($value2)) { 
			if($datatype=="date") { 
				$value1=ConvertToDisplayDate2($value1); $value2=ConvertToDisplayDate2($value2); 
			}
			$sql.=" AND `".$table."`.`".$fieldname."` between '".$value1."' AND '".$value2."' ";  $search="false"; 
		}
		if($datatype=="date") { 
			$value=ConvertToDisplayDate2($value); 
		} 
		$array_list=searching_text1($value);  	
		if(count($array_list) > 1 ) { 
			$sql.=" AND `".$table."`.`".$fieldname."` IN ("; 
			for($m=0;$m<count($array_list);$m++) { 
				$sql.="'".$array_list[$m]."'"; 
				if($m !=(count($array_list) -1)) { 
					$sql.=","; 
				}  
			}
			$sql=$sql.")"; $search="false";
		}
		$numerics=searching_lt($value);
		if(strval($numerics)=='N')       {  
			$numerics=searching_l($value); 
		} 
		if(strval($numerics)=='N')       { 
			 $numerics=searching_mt($value); 
		}
		if(strval($numerics)=='N')       {  
			$numerics=searching_m($value); 
		} 
		if(strval($numerics)=="lt")      {  
			$sql.=" AND `".$table."`.`".$fieldname."` <= '".str_replace("<=","",$value)."'"; $search="false";  
		} elseif(strval($numerics)=="l") {  
			$sql.=" AND `".$table."`.`".$fieldname."` < '".str_replace("<","",$value)."'";   $search="false";	
		}
		if(strval($numerics)=="mt")      {  
			$sql.=" AND `".$table."`.`".$fieldname."` >= '".str_replace(">=","",$value)."'";  $search="false"; 
		} elseif(strval($numerics)=="m")   {  
			$sql.=" AND `".$table."`.`".$fieldname."` > '".str_replace(">","",$value)."'";   $search="false";	 
		}
		if($search !="false")            {  
			if($_GET['search_type'] ||  $datatype=="date" ) { 
				$sql.=" AND `".$table."`.`".$fieldname."` ='".$value."'";  
			} else { 
				
				$sql.=" AND `".$table."`.`".$fieldname."`  like '".$value."'";  
			}
		}
		return $sql;
	}

 ?>