Properties Methods Events Config Options Direct Link

# Class Ext.ux.grid.GridFilters

Package: | Ext.ux.grid
Defined In: | GridFilters.js
Class: | GridFilters
Extends: | Object

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:

- Filtering implementations :
  Default filtering for Strings, Numeric Ranges, Date Ranges, Lists (which can be backed by a Ext.data.Store), and Boolean. Additional custom filter types and menus are easily created by extending Ext.ux.grid.filter.Filter.
- Graphical indicators :
  Columns that are filtered have a configurable css class applied to the column headers.
- Paging :
  If specified as a plugin to the grid's configured PagingToolbar, the current page will be reset to page 1 whenever you update the filters.
- 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 `beforestaterestore` and `beforestatesave` events in order to be stateful.
- Grid Changes :
  - A `filters` property is added to the grid pointing to this plugin.
  - A `filterupdate` event is added to the grid and is fired upon onStateChange completion.
- Server side code examples :
  - PHP - (Thanks VinylFox)
  - Ruby on Rails - (Thanks Zyclops)
  - Ruby on Rails - (Thanks Rotomaul)
  - Python - (Thanks Matt)
  - Grails - (Thanks Mike)

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({
             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

## Config Options

Config Options | Defined By
--- | ---
| autoReload : Boolean Defaults to true, reloading the datasource when a filter change happens. Set this to false to prevent the datastore f... Defaults to true, reloading the datasource when a filter change happens. Set this to false to prevent the datastore from being reloaded if there are changes to the filters. See `updateBuffer`. | GridFilters
| autoReload : Boolean Defaults to true, reloading the datasource when a filter change happens. Set this to false to prevent the datastore f... Defaults to true, reloading the datasource when a filter change happens. Set this to false to prevent the datastore from being reloaded if there are changes to the filters. See `updateBuffer`. | GridFilters
| encode : Boolean Specify true for buildQuery to use Ext.util.JSON.encode to encode the filter query parameter sent with a remote reque... Specify true for buildQuery to use Ext.util.JSON.encode to encode the filter query parameter sent with a remote request. Defaults to false. | GridFilters
| encode : Boolean Specify true for buildQuery to use Ext.util.JSON.encode to encode the filter query parameter sent with a remote reque... Specify true for buildQuery to use Ext.util.JSON.encode to encode the filter query parameter sent with a remote request. Defaults to false. | GridFilters
| filterCls : String The css class to be applied to column headers with active filters. Defaults to `'ux-filterd-column'`. | GridFilters
| filterCls : String The css class to be applied to column headers with active filters. Defaults to `'ux-filterd-column'`. | GridFilters
| filters : Array An Array of filters config objects. Refer to each filter type class for configuration details specific to each filter... An Array of filters config objects. Refer to each filter type class for configuration details specific to each filter type. Filters for Strings, Numeric Ranges, Date Ranges, Lists, and Boolean are the standard filters available. | GridFilters
| filters : Array An Array of filters config objects. Refer to each filter type class for configuration details specific to each filter... An Array of filters config objects. Refer to each filter type class for configuration details specific to each filter type. Filters for Strings, Numeric Ranges, Date Ranges, Lists, and Boolean are the standard filters available. | GridFilters
| local : Boolean `true` to use Ext.data.Store filter functions (local filtering) instead of the default (`false`) server side filtering. | GridFilters
| local : Boolean `true` to use Ext.data.Store filter functions (local filtering) instead of the default (`false`) server side filtering. | GridFilters
| menuFilterText : String defaults to `'Filters'`. | GridFilters
| menuFilterText : String defaults to `'Filters'`. | GridFilters
| paramPrefix : String The url parameter prefix for the filters. Defaults to `'filter'`. | GridFilters
| paramPrefix : String The url parameter prefix for the filters. Defaults to `'filter'`. | GridFilters
| showMenu : Boolean Defaults to true, including a filter submenu in the default header menu. | GridFilters
| showMenu : Boolean Defaults to true, including a filter submenu in the default header menu. | GridFilters
| stateId : String Name of the value to be used to store state information. | GridFilters
| stateId : String Name of the value to be used to store state information. | GridFilters
| updateBuffer : Integer Number of milliseconds to defer store updates since the last filter change. | GridFilters
| updateBuffer : Integer Number of milliseconds to defer store updates since the last filter change. | GridFilters

## Public Properties

This class has no public properties.

## Public Methods

Method | Defined By
--- | ---
| addFilter( `Object/Ext.ux.grid.filter.Filter config` ) : Ext.ux.grid.filter.Filter Adds a filter to the collection and observes it for state change. Adds a filter to the collection and observes it for state change. Parameters: `config` : Object/Ext.ux.grid.filter.Filter A filter configuration or a filter object. Returns: `Ext.ux.grid.filter.Filter` The existing or newly created filter object. | GridFilters
| addFilters( `Array/Ext.grid.ColumnModel filters` ) : void Adds filters to the collection. Adds filters to the collection. Parameters: `filters` : Array/Ext.grid.ColumnModel Either an Array of filter configuration objects or an Ext.grid.ColumnModel. The columns of a passed Ext.grid.ColumnModel will be examined for a `filter` property and, if present, will be used as the filter configuration object. Returns: void | GridFilters
| bindStore( `Store store` ) : void Changes the data store bound to this view and refreshes it. Changes the data store bound to this view and refreshes it. Parameters: `store` : Store The store to bind to this view Returns: void | GridFilters
- | buildQuery( `Array filters` ) : Object Function to take the active filters data and build it into a query. The format of the query depends on the encode con... Function to take the active filters data and build it into a query. The format of the query depends on the `encode` configuration: `false` : Default Flatten into query string of the form (assuming `paramPrefix='filters'`:
      filters[0][field]="someDataIndex"&
      filters[0][data][comparison]="someValue1"&
      filters[0][data][type]="someValue2"&
      filters[0][data][value]="someValue3"&
- `true` : JSON encode the filter data
      filters[0][field]="someDataIndex"&
      filters[0][data][comparison]="someValue1"&
      filters[0][data][type]="someValue2"&
      filters[0][data][value]="someValue3"&
Override this method to customize the format of the filter query for remote requests. Parameters: `filters` : Array A collection of objects representing active filters and their configuration. Each element will take the form of {field: dataIndex, data: filterConf}. dataIndex is not assured to be unique as any one filter may be a composite of more basic filters for the same dataIndex. Returns: `Object` Query keys and values | GridFilters
| cleanParams( `Object p` ) : void Removes filter related query parameters from the provided object. Removes filter related query parameters from the provided object. Parameters: `p` : Object Query parameters that may contain filter related fields. Returns: void | GridFilters
| clearFilters() : void Turns all filters off. This does not clear the configuration information (see removeAll). Turns all filters off. This does not clear the configuration information (see removeAll). Parameters: None. Returns: void | GridFilters
| getFilter( `String dataIndex` ) : Ext.ux.grid.filter.Filter Returns a filter for the given dataIndex, if one exists. Returns a filter for the given dataIndex, if one exists. Parameters: `dataIndex` : String The dataIndex of the desired filter object. Returns: `Ext.ux.grid.filter.Filter` | GridFilters
| getFilterClass( `String type` ) : Class Function for locating filter classes, overwrite this with your favorite loader to provide dynamic filter loading. Function for locating filter classes, overwrite this with your favorite loader to provide dynamic filter loading. Parameters: `type` : String The type of filter to load ('Filter' is automatically appended to the passed type; eg, 'string' becomes 'StringFilter'). Returns: `Class` The Ext.ux.grid.filter.Class | GridFilters
| getFilterData() : Array Returns an Array of the currently active filters. Returns an Array of the currently active filters. Parameters: None. Returns: `Array` filters Array of the currently active filters. | GridFilters
| removeAll() : void Remove all filters, permanently destroying them. Remove all filters, permanently destroying them. Parameters: None. Returns: void | GridFilters
| saveState( `Object grid`, `Object state` ) : Boolean Saves the state of all active filters Saves the state of all active filters Parameters: `grid` : Object `state` : Object Returns: `Boolean` | GridFilters
| updateColumnHeadings() : void Update the styles for the header row based on the active filters Update the styles for the header row based on the active filters Parameters: None. Returns: void | GridFilters

## Public Events

This class has no public events.