Upgrade to ExtJS 3.1.0 - Released 12/16/2009
[extjs.git] / docs / source / GridFilters.html
diff --git a/docs/source/GridFilters.html b/docs/source/GridFilters.html
deleted file mode 100644 (file)
index fab10ac..0000000
+++ /dev/null
@@ -1,738 +0,0 @@
-<html>
-<head>
-  <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.namespace('Ext.ux.grid');\r
-\r
-<div id="cls-Ext.ux.grid.GridFilters"></div>/**\r
- * @class Ext.ux.grid.GridFilters\r
- * @extends Ext.util.Observable\r
- * <p>GridFilter is a plugin (<code>ptype='gridfilters'</code>) for grids that\r
- * allow for a slightly more robust representation of filtering than what is\r
- * provided by the default store.</p>\r
- * <p>Filtering is adjusted by the user using the grid's column header menu\r
- * (this menu can be disabled through configuration). Through this menu users\r
- * can configure, enable, and disable filters for each column.</p>\r
- * <p><b><u>Features:</u></b></p>\r
- * <div class="mdetail-params"><ul>\r
- * <li><b>Filtering implementations</b> :\r
- * <div class="sub-desc">\r
- * Default filtering for Strings, Numeric Ranges, Date Ranges, Lists (which can\r
- * be backed by a Ext.data.Store), and Boolean. Additional custom filter types\r
- * and menus are easily created by extending Ext.ux.grid.filter.Filter.\r
- * </div></li>\r
- * <li><b>Graphical indicators</b> :\r
- * <div class="sub-desc">\r
- * Columns that are filtered have {@link #filterCls a configurable css class}\r
- * applied to the column headers.\r
- * </div></li>\r
- * <li><b>Paging</b> :\r
- * <div class="sub-desc">\r
- * If specified as a plugin to the grid's configured PagingToolbar, the current page\r
- * will be reset to page 1 whenever you update the filters.\r
- * </div></li>\r
- * <li><b>Automatic Reconfiguration</b> :\r
- * <div class="sub-desc">\r
- * Filters automatically reconfigure when the grid 'reconfigure' event fires.\r
- * </div></li>\r
- * <li><b>Stateful</b> :\r
- * Filter information will be persisted across page loads by specifying a\r
- * <code>stateId</code> in the Grid configuration.\r
- * <div class="sub-desc">\r
- * The filter collection binds to the\r
- * <code>{@link Ext.grid.GridPanel#beforestaterestore beforestaterestore}</code>\r
- * and <code>{@link Ext.grid.GridPanel#beforestatesave beforestatesave}</code>\r
- * events in order to be stateful. \r
- * </div></li>\r
- * <li><b>Grid Changes</b> :\r
- * <div class="sub-desc"><ul>\r
- * <li>A <code>filters</code> <i>property</i> is added to the grid pointing to\r
- * this plugin.</li>\r
- * <li>A <code>filterupdate</code> <i>event</i> is added to the grid and is\r
- * fired upon onStateChange completion.</li>\r
- * </ul></div></li>\r
- * <li><b>Server side code examples</b> :\r
- * <div class="sub-desc"><ul>\r
- * <li><a href="http://www.vinylfox.com/extjs/grid-filter-php-backend-code.php">PHP</a> - (Thanks VinylFox)</li>\r
- * <li><a href="http://extjs.com/forum/showthread.php?p=77326#post77326">Ruby on Rails</a> - (Thanks Zyclops)</li>\r
- * <li><a href="http://extjs.com/forum/showthread.php?p=176596#post176596">Ruby on Rails</a> - (Thanks Rotomaul)</li>\r
- * <li><a href="http://www.debatablybeta.com/posts/using-extjss-grid-filtering-with-django/">Python</a> - (Thanks Matt)</li>\r
- * <li><a href="http://mcantrell.wordpress.com/2008/08/22/extjs-grids-and-grails/">Grails</a> - (Thanks Mike)</li>\r
- * </ul></div></li>\r
- * </ul></div>\r
- * <p><b><u>Example usage:</u></b></p>\r
- * <pre><code>    \r
-var store = new Ext.data.GroupingStore({\r
-    ...\r
-});\r
\r
-var filters = new Ext.ux.grid.GridFilters({\r
-    autoReload: false, //don&#39;t reload automatically\r
-    local: true, //only filter locally\r
-    // filters may be configured through the plugin,\r
-    // or in the column definition within the column model configuration\r
-    filters: [{\r
-        type: 'numeric',\r
-        dataIndex: 'id'\r
-    }, {\r
-        type: 'string',\r
-        dataIndex: 'name'\r
-    }, {\r
-        type: 'numeric',\r
-        dataIndex: 'price'\r
-    }, {\r
-        type: 'date',\r
-        dataIndex: 'dateAdded'\r
-    }, {\r
-        type: 'list',\r
-        dataIndex: 'size',\r
-        options: ['extra small', 'small', 'medium', 'large', 'extra large'],\r
-        phpMode: true\r
-    }, {\r
-        type: 'boolean',\r
-        dataIndex: 'visible'\r
-    }]\r
-});\r
-var cm = new Ext.grid.ColumnModel([{\r
-    ...\r
-}]);\r
\r
-var grid = new Ext.grid.GridPanel({\r
-     ds: store,\r
-     cm: cm,\r
-     view: new Ext.grid.GroupingView(),\r
-     plugins: [filters],\r
-     height: 400,\r
-     width: 700,\r
-     bbar: new Ext.PagingToolbar({\r
-         store: store,\r
-         pageSize: 15,\r
-         plugins: [filters] //reset page to page 1 if filters change\r
-     })\r
- });\r
-\r
-store.load({params: {start: 0, limit: 15}});\r
-\r
-// a filters property is added to the grid\r
-grid.filters\r
- * </code></pre>\r
- */\r
-Ext.ux.grid.GridFilters = Ext.extend(Ext.util.Observable, {\r
-    <div id="cfg-Ext.ux.grid.GridFilters-autoReload"></div>/**\r
-     * @cfg {Boolean} autoReload\r
-     * Defaults to true, reloading the datasource when a filter change happens.\r
-     * Set this to false to prevent the datastore from being reloaded if there\r
-     * are changes to the filters.  See <code>{@link updateBuffer}</code>.\r
-     */\r
-    autoReload : true,\r
-    <div id="cfg-Ext.ux.grid.GridFilters-encode"></div>/**\r
-     * @cfg {Boolean} encode\r
-     * Specify true for {@link #buildQuery} to use Ext.util.JSON.encode to\r
-     * encode the filter query parameter sent with a remote request.\r
-     * Defaults to false.\r
-     */\r
-    <div id="cfg-Ext.ux.grid.GridFilters-filters"></div>/**\r
-     * @cfg {Array} filters\r
-     * An Array of filters config objects. Refer to each filter type class for\r
-     * configuration details specific to each filter type. Filters for Strings,\r
-     * Numeric Ranges, Date Ranges, Lists, and Boolean are the standard filters\r
-     * available.\r
-     */\r
-    <div id="cfg-Ext.ux.grid.GridFilters-filterCls"></div>/**\r
-     * @cfg {String} filterCls\r
-     * The css class to be applied to column headers with active filters.\r
-     * Defaults to <tt>'ux-filterd-column'</tt>.\r
-     */\r
-    filterCls : 'ux-filtered-column',\r
-    <div id="cfg-Ext.ux.grid.GridFilters-local"></div>/**\r
-     * @cfg {Boolean} local\r
-     * <tt>true</tt> to use Ext.data.Store filter functions (local filtering)\r
-     * instead of the default (<tt>false</tt>) server side filtering.\r
-     */\r
-    local : false,\r
-    <div id="cfg-Ext.ux.grid.GridFilters-menuFilterText"></div>/**\r
-     * @cfg {String} menuFilterText\r
-     * defaults to <tt>'Filters'</tt>.\r
-     */\r
-    menuFilterText : 'Filters',\r
-    <div id="cfg-Ext.ux.grid.GridFilters-paramPrefix"></div>/**\r
-     * @cfg {String} paramPrefix\r
-     * The url parameter prefix for the filters.\r
-     * Defaults to <tt>'filter'</tt>.\r
-     */\r
-    paramPrefix : 'filter',\r
-    <div id="cfg-Ext.ux.grid.GridFilters-showMenu"></div>/**\r
-     * @cfg {Boolean} showMenu\r
-     * Defaults to true, including a filter submenu in the default header menu.\r
-     */\r
-    showMenu : true,\r
-    <div id="cfg-Ext.ux.grid.GridFilters-stateId"></div>/**\r
-     * @cfg {String} stateId\r
-     * Name of the value to be used to store state information.\r
-     */\r
-    stateId : undefined,\r
-    <div id="cfg-Ext.ux.grid.GridFilters-updateBuffer"></div>/**\r
-     * @cfg {Integer} updateBuffer\r
-     * Number of milliseconds to defer store updates since the last filter change.\r
-     */\r
-    updateBuffer : 500,\r
-\r
-    /** @private */\r
-    constructor : function (config) {          \r
-        this.deferredUpdate = new Ext.util.DelayedTask(this.reload, this);\r
-        this.filters = new Ext.util.MixedCollection();\r
-        this.filters.getKey = function (o) {\r
-            return o ? o.dataIndex : null;\r
-        };\r
-        this.addFilters(config.filters);\r
-        delete config.filters;\r
-        Ext.apply(this, config);\r
-    },\r
-\r
-    /** @private */\r
-    init : function (grid) {\r
-        if (grid instanceof Ext.grid.GridPanel) {\r
-            this.grid = grid;\r
-\r
-            this.bindStore(this.grid.getStore(), true);\r
-          \r
-            this.grid.filters = this;\r
-             \r
-            this.grid.addEvents({'filterupdate': true});\r
-              \r
-            grid.on({\r
-                scope: this,\r
-                beforestaterestore: this.applyState,\r
-                beforestatesave: this.saveState,\r
-                beforedestroy: this.destroy,\r
-                reconfigure: this.onReconfigure\r
-            });\r
-            \r
-            if (grid.rendered){\r
-                this.onRender();\r
-            } else {\r
-                grid.on({\r
-                    scope: this,\r
-                    single: true,\r
-                    render: this.onRender\r
-                });\r
-            }\r
-                      \r
-        } else if (grid instanceof Ext.PagingToolbar) {\r
-            this.toolbar = grid;\r
-        }\r
-    },\r
-        \r
-    /**\r
-     * @private\r
-     * Handler for the grid's beforestaterestore event (fires before the state of the\r
-     * grid is restored).\r
-     * @param {Object} grid The grid object\r
-     * @param {Object} state The hash of state values returned from the StateProvider.\r
-     */   \r
-    applyState : function (grid, state) {\r
-        var key, filter;\r
-        this.applyingState = true;\r
-        this.clearFilters();\r
-        if (state.filters) {\r
-            for (key in state.filters) {\r
-                filter = this.filters.get(key);\r
-                if (filter) {\r
-                    filter.setValue(state.filters[key]);\r
-                    filter.setActive(true);\r
-                }\r
-            }\r
-        }\r
-        this.deferredUpdate.cancel();\r
-        if (this.local) {\r
-            this.reload();\r
-        }\r
-        delete this.applyingState;\r
-    },\r
-    \r
-    <div id="method-Ext.ux.grid.GridFilters-saveState"></div>/**\r
-     * Saves the state of all active filters\r
-     * @param {Object} grid\r
-     * @param {Object} state\r
-     * @return {Boolean}\r
-     */\r
-    saveState : function (grid, state) {\r
-        var filters = {};\r
-        this.filters.each(function (filter) {\r
-            if (filter.active) {\r
-                filters[filter.dataIndex] = filter.getValue();\r
-            }\r
-        });\r
-        return (state.filters = filters);\r
-    },\r
-    \r
-    /**\r
-     * @private\r
-     * Handler called when the grid is rendered\r
-     */    \r
-    onRender : function () {\r
-        this.grid.getView().on('refresh', this.onRefresh, this);\r
-        this.createMenu();\r
-    },\r
-\r
-    /**\r
-     * @private\r
-     * Handler called by the grid 'beforedestroy' event\r
-     */    \r
-    destroy : function () {\r
-        this.removeAll();\r
-        this.purgeListeners();\r
-\r
-        if(this.filterMenu){\r
-            Ext.menu.MenuMgr.unregister(this.filterMenu);\r
-            this.filterMenu.destroy();\r
-             this.filterMenu = this.menu.menu = null;            \r
-        }\r
-    },\r
-\r
-    <div id="method-Ext.ux.grid.GridFilters-removeAll"></div>/**\r
-     * Remove all filters, permanently destroying them.\r
-     */    \r
-    removeAll : function () {\r
-        if(this.filters){\r
-            Ext.destroy.apply(Ext, this.filters.items);\r
-            // remove all items from the collection \r
-            this.filters.clear();\r
-        }\r
-    },\r
-\r
-\r
-    <div id="method-Ext.ux.grid.GridFilters-bindStore"></div>/**\r
-     * Changes the data store bound to this view and refreshes it.\r
-     * @param {Store} store The store to bind to this view\r
-     */\r
-    bindStore : function(store, initial){\r
-        if(!initial && this.store){\r
-            if (this.local) {\r
-                store.un('load', this.onLoad, this);\r
-            } else {\r
-                store.un('beforeload', this.onBeforeLoad, this);\r
-            }\r
-        }\r
-        if(store){\r
-            if (this.local) {\r
-                store.on('load', this.onLoad, this);\r
-            } else {\r
-                store.on('beforeload', this.onBeforeLoad, this);\r
-            }\r
-        }\r
-        this.store = store;\r
-    },\r
-\r
-    /**\r
-     * @private\r
-     * Handler called when the grid reconfigure event fires\r
-     */    \r
-    onReconfigure : function () {\r
-        this.bindStore(this.grid.getStore());\r
-        this.store.clearFilter();\r
-        this.removeAll();\r
-        this.addFilters(this.grid.getColumnModel());\r
-        this.updateColumnHeadings();\r
-    },\r
-\r
-    createMenu : function () {\r
-        var view = this.grid.getView(),\r
-            hmenu = view.hmenu;\r
-\r
-        if (this.showMenu && hmenu) {\r
-            \r
-            this.sep  = hmenu.addSeparator();\r
-            this.filterMenu = new Ext.menu.Menu({\r
-                id: this.grid.id + '-filters-menu'\r
-            }); \r
-            this.menu = hmenu.add({\r
-                checked: false,\r
-                itemId: 'filters',\r
-                text: this.menuFilterText,\r
-                menu: this.filterMenu\r
-            });\r
-\r
-            this.menu.on({\r
-                scope: this,\r
-                checkchange: this.onCheckChange,\r
-                beforecheckchange: this.onBeforeCheck\r
-            });\r
-            hmenu.on('beforeshow', this.onMenu, this);\r
-        }\r
-        this.updateColumnHeadings();\r
-    },\r
-\r
-    /**\r
-     * @private\r
-     * Get the filter menu from the filters MixedCollection based on the clicked header\r
-     */\r
-    getMenuFilter : function () {\r
-        var view = this.grid.getView();\r
-        if (!view || view.hdCtxIndex === undefined) {\r
-            return null;\r
-        }\r
-        return this.filters.get(\r
-            view.cm.config[view.hdCtxIndex].dataIndex\r
-        );\r
-    },\r
-\r
-    /**\r
-     * @private\r
-     * Handler called by the grid's hmenu beforeshow event\r
-     */    \r
-    onMenu : function (filterMenu) {\r
-        var filter = this.getMenuFilter();\r
-\r
-        if (filter) {\r
-/*            \r
-TODO: lazy rendering\r
-            if (!filter.menu) {\r
-                filter.menu = filter.createMenu();\r
-            }\r
-*/\r
-            this.menu.menu = filter.menu;\r
-            this.menu.setChecked(filter.active, false);\r
-            // disable the menu if filter.disabled explicitly set to true\r
-            this.menu.setDisabled(filter.disabled === true);\r
-        }\r
-        \r
-        this.menu.setVisible(filter !== undefined);\r
-        this.sep.setVisible(filter !== undefined);\r
-    },\r
-    \r
-    /** @private */\r
-    onCheckChange : function (item, value) {\r
-        this.getMenuFilter().setActive(value);\r
-    },\r
-    \r
-    /** @private */\r
-    onBeforeCheck : function (check, value) {\r
-        return !value || this.getMenuFilter().isActivatable();\r
-    },\r
-\r
-    /**\r
-     * @private\r
-     * Handler for all events on filters.\r
-     * @param {String} event Event name\r
-     * @param {Object} filter Standard signature of the event before the event is fired\r
-     */   \r
-    onStateChange : function (event, filter) {\r
-        if (event === 'serialize') {\r
-            return;\r
-        }\r
-\r
-        if (filter == this.getMenuFilter()) {\r
-            this.menu.setChecked(filter.active, false);\r
-        }\r
-\r
-        if ((this.autoReload || this.local) && !this.applyingState) {\r
-            this.deferredUpdate.delay(this.updateBuffer);\r
-        }\r
-        this.updateColumnHeadings();\r
-            \r
-        if (!this.applyingState) {\r
-            this.grid.saveState();\r
-        }    \r
-        this.grid.fireEvent('filterupdate', this, filter);\r
-    },\r
-    \r
-    /**\r
-     * @private\r
-     * Handler for store's beforeload event when configured for remote filtering\r
-     * @param {Object} store\r
-     * @param {Object} options\r
-     */\r
-    onBeforeLoad : function (store, options) {\r
-        options.params = options.params || {};\r
-        this.cleanParams(options.params);              \r
-        var params = this.buildQuery(this.getFilterData());\r
-        Ext.apply(options.params, params);\r
-    },\r
-    \r
-    /**\r
-     * @private\r
-     * Handler for store's load event when configured for local filtering\r
-     * @param {Object} store\r
-     * @param {Object} options\r
-     */\r
-    onLoad : function (store, options) {\r
-        store.filterBy(this.getRecordFilter());\r
-    },\r
-\r
-    /**\r
-     * @private\r
-     * Handler called when the grid's view is refreshed\r
-     */    \r
-    onRefresh : function () {\r
-        this.updateColumnHeadings();\r
-    },\r
-\r
-    <div id="method-Ext.ux.grid.GridFilters-updateColumnHeadings"></div>/**\r
-     * Update the styles for the header row based on the active filters\r
-     */    \r
-    updateColumnHeadings : function () {\r
-        var view = this.grid.getView(),\r
-            hds, i, len, filter;\r
-        if (view.mainHd) {\r
-            hds = view.mainHd.select('td').removeClass(this.filterCls);\r
-            for (i = 0, len = view.cm.config.length; i < len; i++) {\r
-                filter = this.getFilter(view.cm.config[i].dataIndex);\r
-                if (filter && filter.active) {\r
-                    hds.item(i).addClass(this.filterCls);\r
-                }\r
-            }\r
-        }\r
-    },\r
-    \r
-    /** @private */\r
-    reload : function () {\r
-        if (this.local) {\r
-            this.grid.store.clearFilter(true);\r
-            this.grid.store.filterBy(this.getRecordFilter());\r
-        } else {\r
-            var start,\r
-                store = this.grid.store;\r
-            this.deferredUpdate.cancel();\r
-            if (this.toolbar) {\r
-                start = store.paramNames.start;\r
-                if (store.lastOptions && store.lastOptions.params && store.lastOptions.params[start]) {\r
-                    store.lastOptions.params[start] = 0;\r
-                }\r
-            }\r
-            store.reload();\r
-        }\r
-    },\r
-    \r
-    /**\r
-     * Method factory that generates a record validator for the filters active at the time\r
-     * of invokation.\r
-     * @private\r
-     */\r
-    getRecordFilter : function () {\r
-        var f = [], len, i;\r
-        this.filters.each(function (filter) {\r
-            if (filter.active) {\r
-                f.push(filter);\r
-            }\r
-        });\r
-        \r
-        len = f.length;\r
-        return function (record) {\r
-            for (i = 0; i < len; i++) {\r
-                if (!f[i].validateRecord(record)) {\r
-                    return false;\r
-                }\r
-            }\r
-            return true;\r
-        };\r
-    },\r
-    \r
-    <div id="method-Ext.ux.grid.GridFilters-addFilter"></div>/**\r
-     * Adds a filter to the collection and observes it for state change.\r
-     * @param {Object/Ext.ux.grid.filter.Filter} config A filter configuration or a filter object.\r
-     * @return {Ext.ux.grid.filter.Filter} The existing or newly created filter object.\r
-     */\r
-    addFilter : function (config) {\r
-        var Cls = this.getFilterClass(config.type),\r
-            filter = config.menu ? config : (new Cls(config));\r
-        this.filters.add(filter);\r
-        \r
-        Ext.util.Observable.capture(filter, this.onStateChange, this);\r
-        return filter;\r
-    },\r
-\r
-    <div id="method-Ext.ux.grid.GridFilters-addFilters"></div>/**\r
-     * Adds filters to the collection.\r
-     * @param {Array/Ext.grid.ColumnModel} filters Either an Array of\r
-     * filter configuration objects or an Ext.grid.ColumnModel.  The columns\r
-     * of a passed Ext.grid.ColumnModel will be examined for a <code>filter</code>\r
-     * property and, if present, will be used as the filter configuration object.   \r
-     */\r
-    addFilters : function (filters) {\r
-        if (filters) {\r
-            var i, len, filter, cm = false, dI;\r
-            if (filters instanceof Ext.grid.ColumnModel) {\r
-                filters = filters.config;\r
-                cm = true;\r
-            }\r
-            for (i = 0, len = filters.length; i < len; i++) {\r
-                filter = false;\r
-                if (cm) {\r
-                    dI = filters[i].dataIndex;\r
-                    filter = filters[i].filter || filters[i].filterable;\r
-                    if (filter){\r
-                        filter = (filter === true) ? {} : filter;\r
-                        Ext.apply(filter, {dataIndex:dI});\r
-                        // filter type is specified in order of preference:\r
-                        //     filter type specified in config\r
-                        //     type specified in store's field's type config\r
-                        filter.type = filter.type || this.store.fields.get(dI).type;  \r
-                    }\r
-                } else {\r
-                    filter = filters[i];\r
-                }\r
-                // if filter config found add filter for the column \r
-                if (filter) {\r
-                    this.addFilter(filter);\r
-                }\r
-            }\r
-        }\r
-    },\r
-    \r
-    <div id="method-Ext.ux.grid.GridFilters-getFilter"></div>/**\r
-     * Returns a filter for the given dataIndex, if one exists.\r
-     * @param {String} dataIndex The dataIndex of the desired filter object.\r
-     * @return {Ext.ux.grid.filter.Filter}\r
-     */\r
-    getFilter : function (dataIndex) {\r
-        return this.filters.get(dataIndex);\r
-    },\r
-\r
-    <div id="method-Ext.ux.grid.GridFilters-clearFilters"></div>/**\r
-     * Turns all filters off. This does not clear the configuration information\r
-     * (see {@link #removeAll}).\r
-     */\r
-    clearFilters : function () {\r
-        this.filters.each(function (filter) {\r
-            filter.setActive(false);\r
-        });\r
-    },\r
-\r
-    <div id="method-Ext.ux.grid.GridFilters-getFilterData"></div>/**\r
-     * Returns an Array of the currently active filters.\r
-     * @return {Array} filters Array of the currently active filters.\r
-     */\r
-    getFilterData : function () {\r
-        var filters = [], i, len;\r
-\r
-        this.filters.each(function (f) {\r
-            if (f.active) {\r
-                var d = [].concat(f.serialize());\r
-                for (i = 0, len = d.length; i < len; i++) {\r
-                    filters.push({\r
-                        field: f.dataIndex,\r
-                        data: d[i]\r
-                    });\r
-                }\r
-            }\r
-        });\r
-        return filters;\r
-    },\r
-    \r
-    <div id="method-Ext.ux.grid.GridFilters-buildQuery"></div>/**\r
-     * Function to take the active filters data and build it into a query.\r
-     * The format of the query depends on the <code>{@link #encode}</code>\r
-     * configuration:\r
-     * <div class="mdetail-params"><ul>\r
-     * \r
-     * <li><b><tt>false</tt></b> : <i>Default</i>\r
-     * <div class="sub-desc">\r
-     * Flatten into query string of the form (assuming <code>{@link #paramPrefix}='filters'</code>:\r
-     * <pre><code>\r
-filters[0][field]="someDataIndex"&\r
-filters[0][data][comparison]="someValue1"&\r
-filters[0][data][type]="someValue2"&\r
-filters[0][data][value]="someValue3"&\r
-     * </code></pre>\r
-     * </div></li>\r
-     * <li><b><tt>true</tt></b> : \r
-     * <div class="sub-desc">\r
-     * JSON encode the filter data\r
-     * <pre><code>\r
-filters[0][field]="someDataIndex"&\r
-filters[0][data][comparison]="someValue1"&\r
-filters[0][data][type]="someValue2"&\r
-filters[0][data][value]="someValue3"&\r
-     * </code></pre>\r
-     * </div></li>\r
-     * </ul></div>\r
-     * Override this method to customize the format of the filter query for remote requests.\r
-     * @param {Array} filters A collection of objects representing active filters and their configuration.\r
-     *           Each element will take the form of {field: dataIndex, data: filterConf}. dataIndex is not assured\r
-     *    to be unique as any one filter may be a composite of more basic filters for the same dataIndex.\r
-     * @return {Object} Query keys and values\r
-     */\r
-    buildQuery : function (filters) {\r
-        var p = {}, i, f, root, dataPrefix, key, tmp,\r
-            len = filters.length;\r
-\r
-        if (!this.encode){\r
-            for (i = 0; i < len; i++) {\r
-                f = filters[i];\r
-                root = [this.paramPrefix, '[', i, ']'].join('');\r
-                p[root + '[field]'] = f.field;\r
-                \r
-                dataPrefix = root + '[data]';\r
-                for (key in f.data) {\r
-                    p[[dataPrefix, '[', key, ']'].join('')] = f.data[key];\r
-                }\r
-            }\r
-        } else {\r
-            tmp = [];\r
-            for (i = 0; i < len; i++) {\r
-                f = filters[i];\r
-                tmp.push(Ext.apply(\r
-                    {},\r
-                    {field: f.field},\r
-                    f.data\r
-                ));\r
-            }\r
-            // only build if there is active filter \r
-            if (tmp.length > 0){\r
-                p[this.paramPrefix] = Ext.util.JSON.encode(tmp);\r
-            }\r
-        }\r
-        return p;\r
-    },\r
-    \r
-    <div id="method-Ext.ux.grid.GridFilters-cleanParams"></div>/**\r
-     * Removes filter related query parameters from the provided object.\r
-     * @param {Object} p Query parameters that may contain filter related fields.\r
-     */\r
-    cleanParams : function (p) {\r
-        // if encoding just delete the property\r
-        if (this.encode) {\r
-            delete p[this.paramPrefix];\r
-        // otherwise scrub the object of filter data\r
-        } else {\r
-            var regex, key;\r
-            regex = new RegExp('^' + this.paramPrefix + '\[[0-9]+\]');\r
-            for (key in p) {\r
-                if (regex.test(key)) {\r
-                    delete p[key];\r
-                }\r
-            }\r
-        }\r
-    },\r
-    \r
-    <div id="method-Ext.ux.grid.GridFilters-getFilterClass"></div>/**\r
-     * Function for locating filter classes, overwrite this with your favorite\r
-     * loader to provide dynamic filter loading.\r
-     * @param {String} type The type of filter to load ('Filter' is automatically\r
-     * appended to the passed type; eg, 'string' becomes 'StringFilter').\r
-     * @return {Class} The Ext.ux.grid.filter.Class \r
-     */\r
-    getFilterClass : function (type) {\r
-        // map the supported Ext.data.Field type values into a supported filter\r
-        switch(type) {\r
-            case 'auto':\r
-              type = 'string';\r
-              break;\r
-            case 'int':\r
-            case 'float':\r
-              type = 'numeric';\r
-              break;\r
-        }\r
-        return Ext.ux.grid.filter[type.substr(0, 1).toUpperCase() + type.substr(1) + 'Filter'];\r
-    }\r
-});\r
-\r
-// register ptype\r
-Ext.preg('gridfilters', Ext.ux.grid.GridFilters);\r
-</pre>
-</body>
-</html>
\ No newline at end of file