Grid Filter Plugin - Backend Code (in PHP)

The code used for this example is available by itself, or as one of the examples in the ExtJS API download.

The Plugin

If your not familiar with the Grid Filter plugin, I would suggest checking out the ExtJS User Extension and Plugins forum thread on this plugin. ExtJS has decided to include my PHP script in the example code released with their 2.1 API download, which I think is a great idea, since the question of how exactly to make this grid filtering work seems to come up very often.

The General Concept

There are five data types that can be filtered, and each of them has their own specific options.

  • string
  • list
  • boolean
  • numeric
  • date

All the info needed to filter a column is passed by the filter grid plugin as a single 'filter' post variable that essentially is a multi-dimentional array.

Each filtered column passes three values, and in some cases a fourth.

  • type
  • value
  • field
  • comparison (only for date or numeric - ne, eq, gt, lt)

This ends up making the post variable look something like this - with two filters.

	 filter[0][data][type] : list
	filter[0][data][value] : small,medium
	      filter[0][field] : size
	 filter[1][data][type] : boolean
	filter[1][data][value] : true
	      filter[1][field] : visible

The predictable format of post variables makes it easy to code the server side PHP for this.

The Code

This simple bit of code is all we need on the server side to have a fully filterable set of data.

See it in action here

UPDATE - 5/28 : Added support for 'ne' (not equals) on numeric and date fields.

Learning ExtJS

By: Shea Frederick,
Colin Ramsay &
Steve ‘Cutter’ Blades