Properties Methods Events Config Options Direct Link
Observable
  GridFilters

Class Ext.ux.grid.GridFilters

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

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 :

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 OptionsDefined By
 filterCls : String
The css class to be applied to column headers with active filters. Defaults to 'ux-filterd-column'.
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
 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
 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

Public Properties

This class has no public properties.

Public Methods

MethodDefined By

Public Events

This class has no public events.