--- /dev/null
+<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'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
git.ithinksw.org / extjs.git / blobdiff