Upgrade to ExtJS 3.3.0 - Released 10/06/2010
[extjs.git] / examples / docs / source / GridFilters.html
diff --git a/examples/docs/source/GridFilters.html b/examples/docs/source/GridFilters.html
new file mode 100644 (file)
index 0000000..7b664fa
--- /dev/null
@@ -0,0 +1,751 @@
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
+  <title>The source code</title>
+    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+</head>
+<body  onload="prettyPrint();">
+    <pre class="prettyprint lang-js">/*!
+ * Ext JS Library 3.3.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+Ext.namespace('Ext.ux.grid');
+
+<div id="cls-Ext.ux.grid.GridFilters"></div>/**
+ * @class Ext.ux.grid.GridFilters
+ * @extends Ext.util.Observable
+ * <p>GridFilter is a plugin (<code>ptype='gridfilters'</code>) for grids that
+ * allow for a slightly more robust representation of filtering than what is
+ * provided by the default store.</p>
+ * <p>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.</p>
+ * <p><b><u>Features:</u></b></p>
+ * <div class="mdetail-params"><ul>
+ * <li><b>Filtering implementations</b> :
+ * <div class="sub-desc">
+ * 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.
+ * </div></li>
+ * <li><b>Graphical indicators</b> :
+ * <div class="sub-desc">
+ * Columns that are filtered have {@link #filterCls a configurable css class}
+ * applied to the column headers.
+ * </div></li>
+ * <li><b>Paging</b> :
+ * <div class="sub-desc">
+ * 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.
+ * </div></li>
+ * <li><b>Automatic Reconfiguration</b> :
+ * <div class="sub-desc">
+ * Filters automatically reconfigure when the grid 'reconfigure' event fires.
+ * </div></li>
+ * <li><b>Stateful</b> :
+ * Filter information will be persisted across page loads by specifying a
+ * <code>stateId</code> in the Grid configuration.
+ * <div class="sub-desc">
+ * The filter collection binds to the
+ * <code>{@link Ext.grid.GridPanel#beforestaterestore beforestaterestore}</code>
+ * and <code>{@link Ext.grid.GridPanel#beforestatesave beforestatesave}</code>
+ * events in order to be stateful.
+ * </div></li>
+ * <li><b>Grid Changes</b> :
+ * <div class="sub-desc"><ul>
+ * <li>A <code>filters</code> <i>property</i> is added to the grid pointing to
+ * this plugin.</li>
+ * <li>A <code>filterupdate</code> <i>event</i> is added to the grid and is
+ * fired upon onStateChange completion.</li>
+ * </ul></div></li>
+ * <li><b>Server side code examples</b> :
+ * <div class="sub-desc"><ul>
+ * <li><a href="http://www.vinylfox.com/extjs/grid-filter-php-backend-code.php">PHP</a> - (Thanks VinylFox)</li>
+ * <li><a href="http://extjs.com/forum/showthread.php?p=77326#post77326">Ruby on Rails</a> - (Thanks Zyclops)</li>
+ * <li><a href="http://extjs.com/forum/showthread.php?p=176596#post176596">Ruby on Rails</a> - (Thanks Rotomaul)</li>
+ * <li><a href="http://www.debatablybeta.com/posts/using-extjss-grid-filtering-with-django/">Python</a> - (Thanks Matt)</li>
+ * <li><a href="http://mcantrell.wordpress.com/2008/08/22/extjs-grids-and-grails/">Grails</a> - (Thanks Mike)</li>
+ * </ul></div></li>
+ * </ul></div>
+ * <p><b><u>Example usage:</u></b></p>
+ * <pre><code>
+var store = new Ext.data.GroupingStore({
+    ...
+});
+
+var filters = new Ext.ux.grid.GridFilters({
+    autoReload: false, //don&#39;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
+ * </code></pre>
+ */
+Ext.ux.grid.GridFilters = Ext.extend(Ext.util.Observable, {
+    <div id="cfg-Ext.ux.grid.GridFilters-autoReload"></div>/**
+     * @cfg {Boolean} autoReload
+     * 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 <code>{@link updateBuffer}</code>.
+     */
+    autoReload : true,
+    <div id="cfg-Ext.ux.grid.GridFilters-encode"></div>/**
+     * @cfg {Boolean} encode
+     * Specify true for {@link #buildQuery} to use Ext.util.JSON.encode to
+     * encode the filter query parameter sent with a remote request.
+     * Defaults to false.
+     */
+    <div id="cfg-Ext.ux.grid.GridFilters-filters"></div>/**
+     * @cfg {Array} filters
+     * 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.
+     */
+    <div id="cfg-Ext.ux.grid.GridFilters-filterCls"></div>/**
+     * @cfg {String} filterCls
+     * The css class to be applied to column headers with active filters.
+     * Defaults to <tt>'ux-filterd-column'</tt>.
+     */
+    filterCls : 'ux-filtered-column',
+    <div id="cfg-Ext.ux.grid.GridFilters-local"></div>/**
+     * @cfg {Boolean} local
+     * <tt>true</tt> to use Ext.data.Store filter functions (local filtering)
+     * instead of the default (<tt>false</tt>) server side filtering.
+     */
+    local : false,
+    <div id="cfg-Ext.ux.grid.GridFilters-menuFilterText"></div>/**
+     * @cfg {String} menuFilterText
+     * defaults to <tt>'Filters'</tt>.
+     */
+    menuFilterText : 'Filters',
+    <div id="cfg-Ext.ux.grid.GridFilters-paramPrefix"></div>/**
+     * @cfg {String} paramPrefix
+     * The url parameter prefix for the filters.
+     * Defaults to <tt>'filter'</tt>.
+     */
+    paramPrefix : 'filter',
+    <div id="cfg-Ext.ux.grid.GridFilters-showMenu"></div>/**
+     * @cfg {Boolean} showMenu
+     * Defaults to true, including a filter submenu in the default header menu.
+     */
+    showMenu : true,
+    <div id="cfg-Ext.ux.grid.GridFilters-stateId"></div>/**
+     * @cfg {String} stateId
+     * Name of the value to be used to store state information.
+     */
+    stateId : undefined,
+    <div id="cfg-Ext.ux.grid.GridFilters-updateBuffer"></div>/**
+     * @cfg {Integer} updateBuffer
+     * Number of milliseconds to defer store updates since the last filter change.
+     */
+    updateBuffer : 500,
+
+    /** @private */
+    constructor : function (config) {
+        config = config || {};
+        this.deferredUpdate = new Ext.util.DelayedTask(this.reload, this);
+        this.filters = new Ext.util.MixedCollection();
+        this.filters.getKey = function (o) {
+            return o ? o.dataIndex : null;
+        };
+        this.addFilters(config.filters);
+        delete config.filters;
+        Ext.apply(this, config);
+    },
+
+    /** @private */
+    init : function (grid) {
+        if (grid instanceof Ext.grid.GridPanel) {
+            this.grid = grid;
+
+            this.bindStore(this.grid.getStore(), true);
+            // assumes no filters were passed in the constructor, so try and use ones from the colModel
+            if(this.filters.getCount() == 0){
+                this.addFilters(this.grid.getColumnModel());
+            }
+
+            this.grid.filters = this;
+
+            this.grid.addEvents({'filterupdate': true});
+
+            grid.on({
+                scope: this,
+                beforestaterestore: this.applyState,
+                beforestatesave: this.saveState,
+                beforedestroy: this.destroy,
+                reconfigure: this.onReconfigure
+            });
+
+            if (grid.rendered){
+                this.onRender();
+            } else {
+                grid.on({
+                    scope: this,
+                    single: true,
+                    render: this.onRender
+                });
+            }
+
+        } else if (grid instanceof Ext.PagingToolbar) {
+            this.toolbar = grid;
+        }
+    },
+
+    /**
+     * @private
+     * Handler for the grid's beforestaterestore event (fires before the state of the
+     * grid is restored).
+     * @param {Object} grid The grid object
+     * @param {Object} state The hash of state values returned from the StateProvider.
+     */
+    applyState : function (grid, state) {
+        var key, filter;
+        this.applyingState = true;
+        this.clearFilters();
+        if (state.filters) {
+            for (key in state.filters) {
+                filter = this.filters.get(key);
+                if (filter) {
+                    filter.setValue(state.filters[key]);
+                    filter.setActive(true);
+                }
+            }
+        }
+        this.deferredUpdate.cancel();
+        if (this.local) {
+            this.reload();
+        }
+        delete this.applyingState;
+        delete state.filters;
+    },
+
+    <div id="method-Ext.ux.grid.GridFilters-saveState"></div>/**
+     * Saves the state of all active filters
+     * @param {Object} grid
+     * @param {Object} state
+     * @return {Boolean}
+     */
+    saveState : function (grid, state) {
+        var filters = {};
+        this.filters.each(function (filter) {
+            if (filter.active) {
+                filters[filter.dataIndex] = filter.getValue();
+            }
+        });
+        return (state.filters = filters);
+    },
+
+    /**
+     * @private
+     * Handler called when the grid is rendered
+     */
+    onRender : function () {
+        this.grid.getView().on('refresh', this.onRefresh, this);
+        this.createMenu();
+    },
+
+    /**
+     * @private
+     * Handler called by the grid 'beforedestroy' event
+     */
+    destroy : function () {
+        this.removeAll();
+        this.purgeListeners();
+
+        if(this.filterMenu){
+            Ext.menu.MenuMgr.unregister(this.filterMenu);
+            this.filterMenu.destroy();
+             this.filterMenu = this.menu.menu = null;
+        }
+    },
+
+    <div id="method-Ext.ux.grid.GridFilters-removeAll"></div>/**
+     * Remove all filters, permanently destroying them.
+     */
+    removeAll : function () {
+        if(this.filters){
+            Ext.destroy.apply(Ext, this.filters.items);
+            // remove all items from the collection
+            this.filters.clear();
+        }
+    },
+
+
+    <div id="method-Ext.ux.grid.GridFilters-bindStore"></div>/**
+     * Changes the data store bound to this view and refreshes it.
+     * @param {Store} store The store to bind to this view
+     */
+    bindStore : function(store, initial){
+        if(!initial && this.store){
+            if (this.local) {
+                store.un('load', this.onLoad, this);
+            } else {
+                store.un('beforeload', this.onBeforeLoad, this);
+            }
+        }
+        if(store){
+            if (this.local) {
+                store.on('load', this.onLoad, this);
+            } else {
+                store.on('beforeload', this.onBeforeLoad, this);
+            }
+        }
+        this.store = store;
+    },
+
+    /**
+     * @private
+     * Handler called when the grid reconfigure event fires
+     */
+    onReconfigure : function () {
+        this.bindStore(this.grid.getStore());
+        this.store.clearFilter();
+        this.removeAll();
+        this.addFilters(this.grid.getColumnModel());
+        this.updateColumnHeadings();
+    },
+
+    createMenu : function () {
+        var view = this.grid.getView(),
+            hmenu = view.hmenu;
+
+        if (this.showMenu && hmenu) {
+
+            this.sep  = hmenu.addSeparator();
+            this.filterMenu = new Ext.menu.Menu({
+                id: this.grid.id + '-filters-menu'
+            });
+            this.menu = hmenu.add({
+                checked: false,
+                itemId: 'filters',
+                text: this.menuFilterText,
+                menu: this.filterMenu
+            });
+
+            this.menu.on({
+                scope: this,
+                checkchange: this.onCheckChange,
+                beforecheckchange: this.onBeforeCheck
+            });
+            hmenu.on('beforeshow', this.onMenu, this);
+        }
+        this.updateColumnHeadings();
+    },
+
+    /**
+     * @private
+     * Get the filter menu from the filters MixedCollection based on the clicked header
+     */
+    getMenuFilter : function () {
+        var view = this.grid.getView();
+        if (!view || view.hdCtxIndex === undefined) {
+            return null;
+        }
+        return this.filters.get(
+            view.cm.config[view.hdCtxIndex].dataIndex
+        );
+    },
+
+    /**
+     * @private
+     * Handler called by the grid's hmenu beforeshow event
+     */
+    onMenu : function (filterMenu) {
+        var filter = this.getMenuFilter();
+
+        if (filter) {
+/*
+TODO: lazy rendering
+            if (!filter.menu) {
+                filter.menu = filter.createMenu();
+            }
+*/
+            this.menu.menu = filter.menu;
+            this.menu.setChecked(filter.active, false);
+            // disable the menu if filter.disabled explicitly set to true
+            this.menu.setDisabled(filter.disabled === true);
+        }
+
+        this.menu.setVisible(filter !== undefined);
+        this.sep.setVisible(filter !== undefined);
+    },
+
+    /** @private */
+    onCheckChange : function (item, value) {
+        this.getMenuFilter().setActive(value);
+    },
+
+    /** @private */
+    onBeforeCheck : function (check, value) {
+        return !value || this.getMenuFilter().isActivatable();
+    },
+
+    /**
+     * @private
+     * Handler for all events on filters.
+     * @param {String} event Event name
+     * @param {Object} filter Standard signature of the event before the event is fired
+     */
+    onStateChange : function (event, filter) {
+        if (event === 'serialize') {
+            return;
+        }
+
+        if (filter == this.getMenuFilter()) {
+            this.menu.setChecked(filter.active, false);
+        }
+
+        if ((this.autoReload || this.local) && !this.applyingState) {
+            this.deferredUpdate.delay(this.updateBuffer);
+        }
+        this.updateColumnHeadings();
+
+        if (!this.applyingState) {
+            this.grid.saveState();
+        }
+        this.grid.fireEvent('filterupdate', this, filter);
+    },
+
+    /**
+     * @private
+     * Handler for store's beforeload event when configured for remote filtering
+     * @param {Object} store
+     * @param {Object} options
+     */
+    onBeforeLoad : function (store, options) {
+        options.params = options.params || {};
+        this.cleanParams(options.params);
+        var params = this.buildQuery(this.getFilterData());
+        Ext.apply(options.params, params);
+    },
+
+    /**
+     * @private
+     * Handler for store's load event when configured for local filtering
+     * @param {Object} store
+     * @param {Object} options
+     */
+    onLoad : function (store, options) {
+        store.filterBy(this.getRecordFilter());
+    },
+
+    /**
+     * @private
+     * Handler called when the grid's view is refreshed
+     */
+    onRefresh : function () {
+        this.updateColumnHeadings();
+    },
+
+    <div id="method-Ext.ux.grid.GridFilters-updateColumnHeadings"></div>/**
+     * Update the styles for the header row based on the active filters
+     */
+    updateColumnHeadings : function () {
+        var view = this.grid.getView(),
+            i, len, filter;
+        if (view.mainHd) {
+            for (i = 0, len = view.cm.config.length; i < len; i++) {
+                filter = this.getFilter(view.cm.config[i].dataIndex);
+                Ext.fly(view.getHeaderCell(i))[filter && filter.active ? 'addClass' : 'removeClass'](this.filterCls);
+            }
+        }
+    },
+
+    /** @private */
+    reload : function () {
+        if (this.local) {
+            this.grid.store.clearFilter(true);
+            this.grid.store.filterBy(this.getRecordFilter());
+        } else {
+            var start,
+                store = this.grid.store;
+            this.deferredUpdate.cancel();
+            if (this.toolbar) {
+                start = store.paramNames.start;
+                if (store.lastOptions && store.lastOptions.params && store.lastOptions.params[start]) {
+                    store.lastOptions.params[start] = 0;
+                }
+            }
+            store.reload();
+        }
+    },
+
+    /**
+     * Method factory that generates a record validator for the filters active at the time
+     * of invokation.
+     * @private
+     */
+    getRecordFilter : function () {
+        var f = [], len, i;
+        this.filters.each(function (filter) {
+            if (filter.active) {
+                f.push(filter);
+            }
+        });
+
+        len = f.length;
+        return function (record) {
+            for (i = 0; i < len; i++) {
+                if (!f[i].validateRecord(record)) {
+                    return false;
+                }
+            }
+            return true;
+        };
+    },
+
+    <div id="method-Ext.ux.grid.GridFilters-addFilter"></div>/**
+     * Adds a filter to the collection and observes it for state change.
+     * @param {Object/Ext.ux.grid.filter.Filter} config A filter configuration or a filter object.
+     * @return {Ext.ux.grid.filter.Filter} The existing or newly created filter object.
+     */
+    addFilter : function (config) {
+        var Cls = this.getFilterClass(config.type),
+            filter = config.menu ? config : (new Cls(config));
+        this.filters.add(filter);
+
+        Ext.util.Observable.capture(filter, this.onStateChange, this);
+        return filter;
+    },
+
+    <div id="method-Ext.ux.grid.GridFilters-addFilters"></div>/**
+     * Adds filters to the collection.
+     * @param {Array/Ext.grid.ColumnModel} filters 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 <code>filter</code>
+     * property and, if present, will be used as the filter configuration object.
+     */
+    addFilters : function (filters) {
+        if (filters) {
+            var i, len, filter, cm = false, dI;
+            if (filters instanceof Ext.grid.ColumnModel) {
+                filters = filters.config;
+                cm = true;
+            }
+            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];
+                }
+                // if filter config found add filter for the column
+                if (filter) {
+                    this.addFilter(filter);
+                }
+            }
+        }
+    },
+
+    <div id="method-Ext.ux.grid.GridFilters-getFilter"></div>/**
+     * Returns a filter for the given dataIndex, if one exists.
+     * @param {String} dataIndex The dataIndex of the desired filter object.
+     * @return {Ext.ux.grid.filter.Filter}
+     */
+    getFilter : function (dataIndex) {
+        return this.filters.get(dataIndex);
+    },
+
+    <div id="method-Ext.ux.grid.GridFilters-clearFilters"></div>/**
+     * Turns all filters off. This does not clear the configuration information
+     * (see {@link #removeAll}).
+     */
+    clearFilters : function () {
+        this.filters.each(function (filter) {
+            filter.setActive(false);
+        });
+    },
+
+    <div id="method-Ext.ux.grid.GridFilters-getFilterData"></div>/**
+     * Returns an Array of the currently active filters.
+     * @return {Array} filters Array of the currently active filters.
+     */
+    getFilterData : function () {
+        var filters = [], i, len;
+
+        this.filters.each(function (f) {
+            if (f.active) {
+                var d = [].concat(f.serialize());
+                for (i = 0, len = d.length; i < len; i++) {
+                    filters.push({
+                        field: f.dataIndex,
+                        data: d[i]
+                    });
+                }
+            }
+        });
+        return filters;
+    },
+
+    <div id="method-Ext.ux.grid.GridFilters-buildQuery"></div>/**
+     * Function to take the active filters data and build it into a query.
+     * The format of the query depends on the <code>{@link #encode}</code>
+     * configuration:
+     * <div class="mdetail-params"><ul>
+     *
+     * <li><b><tt>false</tt></b> : <i>Default</i>
+     * <div class="sub-desc">
+     * Flatten into query string of the form (assuming <code>{@link #paramPrefix}='filters'</code>:
+     * <pre><code>
+filters[0][field]="someDataIndex"&
+filters[0][data][comparison]="someValue1"&
+filters[0][data][type]="someValue2"&
+filters[0][data][value]="someValue3"&
+     * </code></pre>
+     * </div></li>
+     * <li><b><tt>true</tt></b> :
+     * <div class="sub-desc">
+     * JSON encode the filter data
+     * <pre><code>
+filters[0][field]="someDataIndex"&
+filters[0][data][comparison]="someValue1"&
+filters[0][data][type]="someValue2"&
+filters[0][data][value]="someValue3"&
+     * </code></pre>
+     * </div></li>
+     * </ul></div>
+     * Override this method to customize the format of the filter query for remote requests.
+     * @param {Array} filters 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.
+     * @return {Object} Query keys and values
+     */
+    buildQuery : function (filters) {
+        var p = {}, i, f, root, dataPrefix, key, tmp,
+            len = filters.length;
+
+        if (!this.encode){
+            for (i = 0; i < len; i++) {
+                f = filters[i];
+                root = [this.paramPrefix, '[', i, ']'].join('');
+                p[root + '[field]'] = f.field;
+
+                dataPrefix = root + '[data]';
+                for (key in f.data) {
+                    p[[dataPrefix, '[', key, ']'].join('')] = f.data[key];
+                }
+            }
+        } else {
+            tmp = [];
+            for (i = 0; i < len; i++) {
+                f = filters[i];
+                tmp.push(Ext.apply(
+                    {},
+                    {field: f.field},
+                    f.data
+                ));
+            }
+            // only build if there is active filter
+            if (tmp.length > 0){
+                p[this.paramPrefix] = Ext.util.JSON.encode(tmp);
+            }
+        }
+        return p;
+    },
+
+    <div id="method-Ext.ux.grid.GridFilters-cleanParams"></div>/**
+     * Removes filter related query parameters from the provided object.
+     * @param {Object} p Query parameters that may contain filter related fields.
+     */
+    cleanParams : function (p) {
+        // if encoding just delete the property
+        if (this.encode) {
+            delete p[this.paramPrefix];
+        // otherwise scrub the object of filter data
+        } else {
+            var regex, key;
+            regex = new RegExp('^' + this.paramPrefix + '\[[0-9]+\]');
+            for (key in p) {
+                if (regex.test(key)) {
+                    delete p[key];
+                }
+            }
+        }
+    },
+
+    <div id="method-Ext.ux.grid.GridFilters-getFilterClass"></div>/**
+     * Function for locating filter classes, overwrite this with your favorite
+     * loader to provide dynamic filter loading.
+     * @param {String} type The type of filter to load ('Filter' is automatically
+     * appended to the passed type; eg, 'string' becomes 'StringFilter').
+     * @return {Class} The Ext.ux.grid.filter.Class
+     */
+    getFilterClass : function (type) {
+        // map the supported Ext.data.Field type values into a supported filter
+        switch(type) {
+            case 'auto':
+              type = 'string';
+              break;
+            case 'int':
+            case 'float':
+              type = 'numeric';
+              break;
+            case 'bool':
+              type = 'boolean';
+              break;
+        }
+        return Ext.ux.grid.filter[type.substr(0, 1).toUpperCase() + type.substr(1) + 'Filter'];
+    }
+});
+
+// register ptype
+Ext.preg('gridfilters', Ext.ux.grid.GridFilters);
+</pre>    
+</body>
+</html>
\ No newline at end of file