GridFilter is a plugin (ptype='gridfilters') for grids that
- * allow for a slightly more robust representation of filtering than what is
- * provided by the default store.
Filtering is adjusted by the user using the grid's column header menu - * (this menu can be disabled through configuration). Through this menu users - * can configure, enable, and disable filters for each column.
- *Features:
- *stateId in the Grid configuration.
- * {@link Ext.grid.GridPanel#beforestaterestore beforestaterestore}
- * and {@link Ext.grid.GridPanel#beforestatesave beforestatesave}
- * events in order to be stateful.
- * filters property is added to the grid pointing to
- * this plugin.filterupdate event is added to the grid and is
- * fired upon onStateChange completion.Example usage:
- *
-var store = new Ext.data.GroupingStore({
- ...
-});
-
-var filters = new Ext.ux.grid.GridFilters({
- autoReload: false, //don't reload automatically
- local: true, //only filter locally
- // filters may be configured through the plugin,
- // or in the column definition within the column model configuration
- filters: [{
- type: 'numeric',
- dataIndex: 'id'
- }, {
- type: 'string',
- dataIndex: 'name'
- }, {
- type: 'numeric',
- dataIndex: 'price'
- }, {
- type: 'date',
- dataIndex: 'dateAdded'
- }, {
- type: 'list',
- dataIndex: 'size',
- options: ['extra small', 'small', 'medium', 'large', 'extra large'],
- phpMode: true
- }, {
- type: 'boolean',
- dataIndex: 'visible'
- }]
-});
-var cm = new Ext.grid.ColumnModel([{
- ...
-}]);
-
-var grid = new Ext.grid.GridPanel({
- ds: store,
- cm: cm,
- view: new Ext.grid.GroupingView(),
- plugins: [filters],
- height: 400,
- width: 700,
- bbar: new Ext.PagingToolbar({
+ * @class Ext.ux.grid.FiltersFeature
+ * @extends Ext.grid.Feature
+
+FiltersFeature is a grid {@link Ext.grid.Feature feature} that allows for a slightly more
+robust representation of filtering than what is provided by the default store.
+
+Filtering is adjusted by the user using the grid's column header menu (this menu can be
+disabled through configuration). Through this menu users can configure, enable, and
+disable filters for each column.
+
+#Features#
+
+##Filtering implementations:##
+
+Default filtering for Strings, Numeric Ranges, Date Ranges, Lists (which can be backed by a
+{@link Ext.data.Store}), and Boolean. Additional custom filter types and menus are easily
+created by extending {@link Ext.ux.grid.filter.Filter}.
+
+##Graphical Indicators:##
+
+Columns that are filtered have {@link #filterCls a configurable css class} applied to the column headers.
+
+##Automatic Reconfiguration:##
+
+Filters automatically reconfigure when the grid 'reconfigure' event fires.
+
+##Stateful:##
+
+Filter information will be persisted across page loads by specifying a `stateId`
+in the Grid configuration.
+
+The filter collection binds to the {@link Ext.grid.Panel#beforestaterestore beforestaterestore}
+and {@link Ext.grid.Panel#beforestatesave beforestatesave} events in order to be stateful.
+
+##GridPanel Changes:##
+
+- A `filters` property is added to the GridPanel using this feature.
+- A `filterupdate` event is added to the GridPanel and is fired upon onStateChange completion.
+
+##Server side code examples:##
+
+- [PHP](http://www.vinylfox.com/extjs/grid-filter-php-backend-code.php) - (Thanks VinylFox)
+- [Ruby on Rails](http://extjs.com/forum/showthread.php?p=77326#post77326) - (Thanks Zyclops)
+- [Ruby on Rails](http://extjs.com/forum/showthread.php?p=176596#post176596) - (Thanks Rotomaul)
+- [Python](http://www.debatablybeta.com/posts/using-extjss-grid-filtering-with-django/) - (Thanks Matt)
+- [Grails](http://mcantrell.wordpress.com/2008/08/22/extjs-grids-and-grails/) - (Thanks Mike)
+
+#Example usage:#
+
+ var store = Ext.create('Ext.data.Store', {
+ pageSize: 15
+ ...
+ });
+
+ var filtersCfg = {
+ ftype: 'filters',
+ autoReload: false, //don't reload automatically
+ local: true, //only filter locally
+ // filters may be configured through the plugin,
+ // or in the column definition within the headers configuration
+ filters: [{
+ type: 'numeric',
+ dataIndex: 'id'
+ }, {
+ type: 'string',
+ dataIndex: 'name'
+ }, {
+ type: 'numeric',
+ dataIndex: 'price'
+ }, {
+ type: 'date',
+ dataIndex: 'dateAdded'
+ }, {
+ type: 'list',
+ dataIndex: 'size',
+ options: ['extra small', 'small', 'medium', 'large', 'extra large'],
+ phpMode: true
+ }, {
+ type: 'boolean',
+ dataIndex: 'visible'
+ }]
+ };
+
+ var grid = Ext.create('Ext.grid.Panel', {
store: store,
- pageSize: 15,
- plugins: [filters] //reset page to page 1 if filters change
- })
- });
-
-store.load({params: {start: 0, limit: 15}});
-
-// a filters property is added to the grid
-grid.filters
- * filter
- * property and, if present, will be used as the filter configuration object.
+ * @param {Array} filters An Array of filter configuration objects.
*/
addFilters : function (filters) {
if (filters) {
- var i, len, filter, cm = false, dI;
- if (filters instanceof Ext.grid.ColumnModel) {
- filters = filters.config;
- cm = true;
- }
+ var i, len, filter;
for (i = 0, len = filters.length; i < len; i++) {
- filter = false;
- if (cm) {
- dI = filters[i].dataIndex;
- filter = filters[i].filter || filters[i].filterable;
- if (filter){
- filter = (filter === true) ? {} : filter;
- Ext.apply(filter, {dataIndex:dI});
- // filter type is specified in order of preference:
- // filter type specified in config
- // type specified in store's field's type config
- filter.type = filter.type || this.store.fields.get(dI).type.type;
- }
- } else {
- filter = filters[i];
- }
+ filter = filters[i];
// if filter config found add filter for the column
if (filter) {
this.addFilter(filter);
@@ -685,7 +643,7 @@ filters[0][data][value]="someValue3"&
}
// only build if there is active filter
if (tmp.length > 0){
- p[this.paramPrefix] = Ext.util.JSON.encode(tmp);
+ p[this.paramPrefix] = Ext.JSON.encode(tmp);
}
}
return p;
@@ -732,9 +690,6 @@ filters[0][data][value]="someValue3"&
type = 'boolean';
break;
}
- return Ext.ux.grid.filter[type.substr(0, 1).toUpperCase() + type.substr(1) + 'Filter'];
+ return Ext.ClassManager.getByAlias('gridfilter.' + type);
}
});
-
-// register ptype
-Ext.preg('gridfilters', Ext.ux.grid.GridFilters);