examples/ux/gridfilters/GridFilters.js

   1 /*!
   2  * Ext JS Library 3.1.1
   3  * Copyright(c) 2006-2010 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.namespace('Ext.ux.grid');\r
   8 \r
   9 /**\r
  10  * @class Ext.ux.grid.GridFilters\r
  11  * @extends Ext.util.Observable\r
  12  * <p>GridFilter is a plugin (<code>ptype='gridfilters'</code>) for grids that\r
  13  * allow for a slightly more robust representation of filtering than what is\r
  14  * provided by the default store.</p>\r
  15  * <p>Filtering is adjusted by the user using the grid's column header menu\r
  16  * (this menu can be disabled through configuration). Through this menu users\r
  17  * can configure, enable, and disable filters for each column.</p>\r
  18  * <p><b><u>Features:</u></b></p>\r
  19  * <div class="mdetail-params"><ul>\r
  20  * <li><b>Filtering implementations</b> :\r
  21  * <div class="sub-desc">\r
  22  * Default filtering for Strings, Numeric Ranges, Date Ranges, Lists (which can\r
  23  * be backed by a Ext.data.Store), and Boolean. Additional custom filter types\r
  24  * and menus are easily created by extending Ext.ux.grid.filter.Filter.\r
  25  * </div></li>\r
  26  * <li><b>Graphical indicators</b> :\r
  27  * <div class="sub-desc">\r
  28  * Columns that are filtered have {@link #filterCls a configurable css class}\r
  29  * applied to the column headers.\r
  30  * </div></li>\r
  31  * <li><b>Paging</b> :\r
  32  * <div class="sub-desc">\r
  33  * If specified as a plugin to the grid's configured PagingToolbar, the current page\r
  34  * will be reset to page 1 whenever you update the filters.\r
  35  * </div></li>\r
  36  * <li><b>Automatic Reconfiguration</b> :\r
  37  * <div class="sub-desc">\r
  38  * Filters automatically reconfigure when the grid 'reconfigure' event fires.\r
  39  * </div></li>\r
  40  * <li><b>Stateful</b> :\r
  41  * Filter information will be persisted across page loads by specifying a\r
  42  * <code>stateId</code> in the Grid configuration.\r
  43  * <div class="sub-desc">\r
  44  * The filter collection binds to the\r
  45  * <code>{@link Ext.grid.GridPanel#beforestaterestore beforestaterestore}</code>\r
  46  * and <code>{@link Ext.grid.GridPanel#beforestatesave beforestatesave}</code>\r
  47  * events in order to be stateful.\r
  48  * </div></li>\r
  49  * <li><b>Grid Changes</b> :\r
  50  * <div class="sub-desc"><ul>\r
  51  * <li>A <code>filters</code> <i>property</i> is added to the grid pointing to\r
  52  * this plugin.</li>\r
  53  * <li>A <code>filterupdate</code> <i>event</i> is added to the grid and is\r
  54  * fired upon onStateChange completion.</li>\r
  55  * </ul></div></li>\r
  56  * <li><b>Server side code examples</b> :\r
  57  * <div class="sub-desc"><ul>\r
  58  * <li><a href="http://www.vinylfox.com/extjs/grid-filter-php-backend-code.php">PHP</a> - (Thanks VinylFox)</li>\r
  59  * <li><a href="http://extjs.com/forum/showthread.php?p=77326#post77326">Ruby on Rails</a> - (Thanks Zyclops)</li>\r
  60  * <li><a href="http://extjs.com/forum/showthread.php?p=176596#post176596">Ruby on Rails</a> - (Thanks Rotomaul)</li>\r
  61  * <li><a href="http://www.debatablybeta.com/posts/using-extjss-grid-filtering-with-django/">Python</a> - (Thanks Matt)</li>\r
  62  * <li><a href="http://mcantrell.wordpress.com/2008/08/22/extjs-grids-and-grails/">Grails</a> - (Thanks Mike)</li>\r
  63  * </ul></div></li>\r
  64  * </ul></div>\r
  65  * <p><b><u>Example usage:</u></b></p>\r
  66  * <pre><code>\r
  67 var store = new Ext.data.GroupingStore({\r
  68     ...\r
  69 });\r
  70 \r
  71 var filters = new Ext.ux.grid.GridFilters({\r
  72     autoReload: false, //don&#39;t reload automatically\r
  73     local: true, //only filter locally\r
  74     // filters may be configured through the plugin,\r
  75     // or in the column definition within the column model configuration\r
  76     filters: [{\r
  77         type: 'numeric',\r
  78         dataIndex: 'id'\r
  79     }, {\r
  80         type: 'string',\r
  81         dataIndex: 'name'\r
  82     }, {\r
  83         type: 'numeric',\r
  84         dataIndex: 'price'\r
  85     }, {\r
  86         type: 'date',\r
  87         dataIndex: 'dateAdded'\r
  88     }, {\r
  89         type: 'list',\r
  90         dataIndex: 'size',\r
  91         options: ['extra small', 'small', 'medium', 'large', 'extra large'],\r
  92         phpMode: true\r
  93     }, {\r
  94         type: 'boolean',\r
  95         dataIndex: 'visible'\r
  96     }]\r
  97 });\r
  98 var cm = new Ext.grid.ColumnModel([{\r
  99     ...\r
 100 }]);\r
 101 \r
 102 var grid = new Ext.grid.GridPanel({\r
 103      ds: store,\r
 104      cm: cm,\r
 105      view: new Ext.grid.GroupingView(),\r
 106      plugins: [filters],\r
 107      height: 400,\r
 108      width: 700,\r
 109      bbar: new Ext.PagingToolbar({\r
 110          store: store,\r
 111          pageSize: 15,\r
 112          plugins: [filters] //reset page to page 1 if filters change\r
 113      })\r
 114  });\r
 115 \r
 116 store.load({params: {start: 0, limit: 15}});\r
 117 \r
 118 // a filters property is added to the grid\r
 119 grid.filters\r
 120  * </code></pre>\r
 121  */\r
 122 Ext.ux.grid.GridFilters = Ext.extend(Ext.util.Observable, {\r
 123     /**\r
 124      * @cfg {Boolean} autoReload\r
 125      * Defaults to true, reloading the datasource when a filter change happens.\r
 126      * Set this to false to prevent the datastore from being reloaded if there\r
 127      * are changes to the filters.  See <code>{@link updateBuffer}</code>.\r
 128      */\r
 129     autoReload : true,\r
 130     /**\r
 131      * @cfg {Boolean} encode\r
 132      * Specify true for {@link #buildQuery} to use Ext.util.JSON.encode to\r
 133      * encode the filter query parameter sent with a remote request.\r
 134      * Defaults to false.\r
 135      */\r
 136     /**\r
 137      * @cfg {Array} filters\r
 138      * An Array of filters config objects. Refer to each filter type class for\r
 139      * configuration details specific to each filter type. Filters for Strings,\r
 140      * Numeric Ranges, Date Ranges, Lists, and Boolean are the standard filters\r
 141      * available.\r
 142      */\r
 143     /**\r
 144      * @cfg {String} filterCls\r
 145      * The css class to be applied to column headers with active filters.\r
 146      * Defaults to <tt>'ux-filterd-column'</tt>.\r
 147      */\r
 148     filterCls : 'ux-filtered-column',\r
 149     /**\r
 150      * @cfg {Boolean} local\r
 151      * <tt>true</tt> to use Ext.data.Store filter functions (local filtering)\r
 152      * instead of the default (<tt>false</tt>) server side filtering.\r
 153      */\r
 154     local : false,\r
 155     /**\r
 156      * @cfg {String} menuFilterText\r
 157      * defaults to <tt>'Filters'</tt>.\r
 158      */\r
 159     menuFilterText : 'Filters',\r
 160     /**\r
 161      * @cfg {String} paramPrefix\r
 162      * The url parameter prefix for the filters.\r
 163      * Defaults to <tt>'filter'</tt>.\r
 164      */\r
 165     paramPrefix : 'filter',\r
 166     /**\r
 167      * @cfg {Boolean} showMenu\r
 168      * Defaults to true, including a filter submenu in the default header menu.\r
 169      */\r
 170     showMenu : true,\r
 171     /**\r
 172      * @cfg {String} stateId\r
 173      * Name of the value to be used to store state information.\r
 174      */\r
 175     stateId : undefined,\r
 176     /**\r
 177      * @cfg {Integer} updateBuffer\r
 178      * Number of milliseconds to defer store updates since the last filter change.\r
 179      */\r
 180     updateBuffer : 500,\r
 181 \r
 182     /** @private */\r
 183     constructor : function (config) {\r
 184         config = config || {};\r
 185         this.deferredUpdate = new Ext.util.DelayedTask(this.reload, this);\r
 186         this.filters = new Ext.util.MixedCollection();\r
 187         this.filters.getKey = function (o) {\r
 188             return o ? o.dataIndex : null;\r
 189         };\r
 190         this.addFilters(config.filters);\r
 191         delete config.filters;\r
 192         Ext.apply(this, config);\r
 193     },\r
 194 \r
 195     /** @private */\r
 196     init : function (grid) {\r
 197         if (grid instanceof Ext.grid.GridPanel) {\r
 198             this.grid = grid;\r
 199 \r
 200             this.bindStore(this.grid.getStore(), true);\r
 201             // assumes no filters were passed in the constructor, so try and use ones from the colModel\r
 202             if(this.filters.getCount() == 0){\r
 203                 this.addFilters(this.grid.getColumnModel());\r
 204             }\r
 205 \r
 206             this.grid.filters = this;\r
 207 \r
 208             this.grid.addEvents({'filterupdate': true});\r
 209 \r
 210             grid.on({\r
 211                 scope: this,\r
 212                 beforestaterestore: this.applyState,\r
 213                 beforestatesave: this.saveState,\r
 214                 beforedestroy: this.destroy,\r
 215                 reconfigure: this.onReconfigure\r
 216             });\r
 217 \r
 218             if (grid.rendered){\r
 219                 this.onRender();\r
 220             } else {\r
 221                 grid.on({\r
 222                     scope: this,\r
 223                     single: true,\r
 224                     render: this.onRender\r
 225                 });\r
 226             }\r
 227 \r
 228         } else if (grid instanceof Ext.PagingToolbar) {\r
 229             this.toolbar = grid;\r
 230         }\r
 231     },\r
 232 \r
 233     /**\r
 234      * @private\r
 235      * Handler for the grid's beforestaterestore event (fires before the state of the\r
 236      * grid is restored).\r
 237      * @param {Object} grid The grid object\r
 238      * @param {Object} state The hash of state values returned from the StateProvider.\r
 239      */\r
 240     applyState : function (grid, state) {\r
 241         var key, filter;\r
 242         this.applyingState = true;\r
 243         this.clearFilters();\r
 244         if (state.filters) {\r
 245             for (key in state.filters) {\r
 246                 filter = this.filters.get(key);\r
 247                 if (filter) {\r
 248                     filter.setValue(state.filters[key]);\r
 249                     filter.setActive(true);\r
 250                 }\r
 251             }\r
 252         }\r
 253         this.deferredUpdate.cancel();\r
 254         if (this.local) {\r
 255             this.reload();\r
 256         }\r
 257         delete this.applyingState;\r
 258     },\r
 259 \r
 260     /**\r
 261      * Saves the state of all active filters\r
 262      * @param {Object} grid\r
 263      * @param {Object} state\r
 264      * @return {Boolean}\r
 265      */\r
 266     saveState : function (grid, state) {\r
 267         var filters = {};\r
 268         this.filters.each(function (filter) {\r
 269             if (filter.active) {\r
 270                 filters[filter.dataIndex] = filter.getValue();\r
 271             }\r
 272         });\r
 273         return (state.filters = filters);\r
 274     },\r
 275 \r
 276     /**\r
 277      * @private\r
 278      * Handler called when the grid is rendered\r
 279      */\r
 280     onRender : function () {\r
 281         this.grid.getView().on('refresh', this.onRefresh, this);\r
 282         this.createMenu();\r
 283     },\r
 284 \r
 285     /**\r
 286      * @private\r
 287      * Handler called by the grid 'beforedestroy' event\r
 288      */\r
 289     destroy : function () {\r
 290         this.removeAll();\r
 291         this.purgeListeners();\r
 292 \r
 293         if(this.filterMenu){\r
 294             Ext.menu.MenuMgr.unregister(this.filterMenu);\r
 295             this.filterMenu.destroy();\r
 296              this.filterMenu = this.menu.menu = null;\r
 297         }\r
 298     },\r
 299 \r
 300     /**\r
 301      * Remove all filters, permanently destroying them.\r
 302      */\r
 303     removeAll : function () {\r
 304         if(this.filters){\r
 305             Ext.destroy.apply(Ext, this.filters.items);\r
 306             // remove all items from the collection\r
 307             this.filters.clear();\r
 308         }\r
 309     },\r
 310 \r
 311 \r
 312     /**\r
 313      * Changes the data store bound to this view and refreshes it.\r
 314      * @param {Store} store The store to bind to this view\r
 315      */\r
 316     bindStore : function(store, initial){\r
 317         if(!initial && this.store){\r
 318             if (this.local) {\r
 319                 store.un('load', this.onLoad, this);\r
 320             } else {\r
 321                 store.un('beforeload', this.onBeforeLoad, this);\r
 322             }\r
 323         }\r
 324         if(store){\r
 325             if (this.local) {\r
 326                 store.on('load', this.onLoad, this);\r
 327             } else {\r
 328                 store.on('beforeload', this.onBeforeLoad, this);\r
 329             }\r
 330         }\r
 331         this.store = store;\r
 332     },\r
 333 \r
 334     /**\r
 335      * @private\r
 336      * Handler called when the grid reconfigure event fires\r
 337      */\r
 338     onReconfigure : function () {\r
 339         this.bindStore(this.grid.getStore());\r
 340         this.store.clearFilter();\r
 341         this.removeAll();\r
 342         this.addFilters(this.grid.getColumnModel());\r
 343         this.updateColumnHeadings();\r
 344     },\r
 345 \r
 346     createMenu : function () {\r
 347         var view = this.grid.getView(),\r
 348             hmenu = view.hmenu;\r
 349 \r
 350         if (this.showMenu && hmenu) {\r
 351 \r
 352             this.sep  = hmenu.addSeparator();\r
 353             this.filterMenu = new Ext.menu.Menu({\r
 354                 id: this.grid.id + '-filters-menu'\r
 355             });\r
 356             this.menu = hmenu.add({\r
 357                 checked: false,\r
 358                 itemId: 'filters',\r
 359                 text: this.menuFilterText,\r
 360                 menu: this.filterMenu\r
 361             });\r
 362 \r
 363             this.menu.on({\r
 364                 scope: this,\r
 365                 checkchange: this.onCheckChange,\r
 366                 beforecheckchange: this.onBeforeCheck\r
 367             });\r
 368             hmenu.on('beforeshow', this.onMenu, this);\r
 369         }\r
 370         this.updateColumnHeadings();\r
 371     },\r
 372 \r
 373     /**\r
 374      * @private\r
 375      * Get the filter menu from the filters MixedCollection based on the clicked header\r
 376      */\r
 377     getMenuFilter : function () {\r
 378         var view = this.grid.getView();\r
 379         if (!view || view.hdCtxIndex === undefined) {\r
 380             return null;\r
 381         }\r
 382         return this.filters.get(\r
 383             view.cm.config[view.hdCtxIndex].dataIndex\r
 384         );\r
 385     },\r
 386 \r
 387     /**\r
 388      * @private\r
 389      * Handler called by the grid's hmenu beforeshow event\r
 390      */\r
 391     onMenu : function (filterMenu) {\r
 392         var filter = this.getMenuFilter();\r
 393 \r
 394         if (filter) {\r
 395 /*\r
 396 TODO: lazy rendering\r
 397             if (!filter.menu) {\r
 398                 filter.menu = filter.createMenu();\r
 399             }\r
 400 */\r
 401             this.menu.menu = filter.menu;\r
 402             this.menu.setChecked(filter.active, false);\r
 403             // disable the menu if filter.disabled explicitly set to true\r
 404             this.menu.setDisabled(filter.disabled === true);\r
 405         }\r
 406 \r
 407         this.menu.setVisible(filter !== undefined);\r
 408         this.sep.setVisible(filter !== undefined);\r
 409     },\r
 410 \r
 411     /** @private */\r
 412     onCheckChange : function (item, value) {\r
 413         this.getMenuFilter().setActive(value);\r
 414     },\r
 415 \r
 416     /** @private */\r
 417     onBeforeCheck : function (check, value) {\r
 418         return !value || this.getMenuFilter().isActivatable();\r
 419     },\r
 420 \r
 421     /**\r
 422      * @private\r
 423      * Handler for all events on filters.\r
 424      * @param {String} event Event name\r
 425      * @param {Object} filter Standard signature of the event before the event is fired\r
 426      */\r
 427     onStateChange : function (event, filter) {\r
 428         if (event === 'serialize') {\r
 429             return;\r
 430         }\r
 431 \r
 432         if (filter == this.getMenuFilter()) {\r
 433             this.menu.setChecked(filter.active, false);\r
 434         }\r
 435 \r
 436         if ((this.autoReload || this.local) && !this.applyingState) {\r
 437             this.deferredUpdate.delay(this.updateBuffer);\r
 438         }\r
 439         this.updateColumnHeadings();\r
 440 \r
 441         if (!this.applyingState) {\r
 442             this.grid.saveState();\r
 443         }\r
 444         this.grid.fireEvent('filterupdate', this, filter);\r
 445     },\r
 446 \r
 447     /**\r
 448      * @private\r
 449      * Handler for store's beforeload event when configured for remote filtering\r
 450      * @param {Object} store\r
 451      * @param {Object} options\r
 452      */\r
 453     onBeforeLoad : function (store, options) {\r
 454         options.params = options.params || {};\r
 455         this.cleanParams(options.params);\r
 456         var params = this.buildQuery(this.getFilterData());\r
 457         Ext.apply(options.params, params);\r
 458     },\r
 459 \r
 460     /**\r
 461      * @private\r
 462      * Handler for store's load event when configured for local filtering\r
 463      * @param {Object} store\r
 464      * @param {Object} options\r
 465      */\r
 466     onLoad : function (store, options) {\r
 467         store.filterBy(this.getRecordFilter());\r
 468     },\r
 469 \r
 470     /**\r
 471      * @private\r
 472      * Handler called when the grid's view is refreshed\r
 473      */\r
 474     onRefresh : function () {\r
 475         this.updateColumnHeadings();\r
 476     },\r
 477 \r
 478     /**\r
 479      * Update the styles for the header row based on the active filters\r
 480      */\r
 481     updateColumnHeadings : function () {\r
 482         var view = this.grid.getView(),\r
 483             i, len, filter;\r
 484         if (view.mainHd) {\r
 485             for (i = 0, len = view.cm.config.length; i < len; i++) {\r
 486                 filter = this.getFilter(view.cm.config[i].dataIndex);\r
 487                 Ext.fly(view.getHeaderCell(i))[filter && filter.active ? 'addClass' : 'removeClass'](this.filterCls);\r
 488             }\r
 489         }\r
 490     },\r
 491 \r
 492     /** @private */\r
 493     reload : function () {\r
 494         if (this.local) {\r
 495             this.grid.store.clearFilter(true);\r
 496             this.grid.store.filterBy(this.getRecordFilter());\r
 497         } else {\r
 498             var start,\r
 499                 store = this.grid.store;\r
 500             this.deferredUpdate.cancel();\r
 501             if (this.toolbar) {\r
 502                 start = store.paramNames.start;\r
 503                 if (store.lastOptions && store.lastOptions.params && store.lastOptions.params[start]) {\r
 504                     store.lastOptions.params[start] = 0;\r
 505                 }\r
 506             }\r
 507             store.reload();\r
 508         }\r
 509     },\r
 510 \r
 511     /**\r
 512      * Method factory that generates a record validator for the filters active at the time\r
 513      * of invokation.\r
 514      * @private\r
 515      */\r
 516     getRecordFilter : function () {\r
 517         var f = [], len, i;\r
 518         this.filters.each(function (filter) {\r
 519             if (filter.active) {\r
 520                 f.push(filter);\r
 521             }\r
 522         });\r
 523 \r
 524         len = f.length;\r
 525         return function (record) {\r
 526             for (i = 0; i < len; i++) {\r
 527                 if (!f[i].validateRecord(record)) {\r
 528                     return false;\r
 529                 }\r
 530             }\r
 531             return true;\r
 532         };\r
 533     },\r
 534 \r
 535     /**\r
 536      * Adds a filter to the collection and observes it for state change.\r
 537      * @param {Object/Ext.ux.grid.filter.Filter} config A filter configuration or a filter object.\r
 538      * @return {Ext.ux.grid.filter.Filter} The existing or newly created filter object.\r
 539      */\r
 540     addFilter : function (config) {\r
 541         var Cls = this.getFilterClass(config.type),\r
 542             filter = config.menu ? config : (new Cls(config));\r
 543         this.filters.add(filter);\r
 544 \r
 545         Ext.util.Observable.capture(filter, this.onStateChange, this);\r
 546         return filter;\r
 547     },\r
 548 \r
 549     /**\r
 550      * Adds filters to the collection.\r
 551      * @param {Array/Ext.grid.ColumnModel} filters Either an Array of\r
 552      * filter configuration objects or an Ext.grid.ColumnModel.  The columns\r
 553      * of a passed Ext.grid.ColumnModel will be examined for a <code>filter</code>\r
 554      * property and, if present, will be used as the filter configuration object.\r
 555      */\r
 556     addFilters : function (filters) {\r
 557         if (filters) {\r
 558             var i, len, filter, cm = false, dI;\r
 559             if (filters instanceof Ext.grid.ColumnModel) {\r
 560                 filters = filters.config;\r
 561                 cm = true;\r
 562             }\r
 563             for (i = 0, len = filters.length; i < len; i++) {\r
 564                 filter = false;\r
 565                 if (cm) {\r
 566                     dI = filters[i].dataIndex;\r
 567                     filter = filters[i].filter || filters[i].filterable;\r
 568                     if (filter){\r
 569                         filter = (filter === true) ? {} : filter;\r
 570                         Ext.apply(filter, {dataIndex:dI});\r
 571                         // filter type is specified in order of preference:\r
 572                         //     filter type specified in config\r
 573                         //     type specified in store's field's type config\r
 574                         filter.type = filter.type || this.store.fields.get(dI).type;\r
 575                     }\r
 576                 } else {\r
 577                     filter = filters[i];\r
 578                 }\r
 579                 // if filter config found add filter for the column\r
 580                 if (filter) {\r
 581                     this.addFilter(filter);\r
 582                 }\r
 583             }\r
 584         }\r
 585     },\r
 586 \r
 587     /**\r
 588      * Returns a filter for the given dataIndex, if one exists.\r
 589      * @param {String} dataIndex The dataIndex of the desired filter object.\r
 590      * @return {Ext.ux.grid.filter.Filter}\r
 591      */\r
 592     getFilter : function (dataIndex) {\r
 593         return this.filters.get(dataIndex);\r
 594     },\r
 595 \r
 596     /**\r
 597      * Turns all filters off. This does not clear the configuration information\r
 598      * (see {@link #removeAll}).\r
 599      */\r
 600     clearFilters : function () {\r
 601         this.filters.each(function (filter) {\r
 602             filter.setActive(false);\r
 603         });\r
 604     },\r
 605 \r
 606     /**\r
 607      * Returns an Array of the currently active filters.\r
 608      * @return {Array} filters Array of the currently active filters.\r
 609      */\r
 610     getFilterData : function () {\r
 611         var filters = [], i, len;\r
 612 \r
 613         this.filters.each(function (f) {\r
 614             if (f.active) {\r
 615                 var d = [].concat(f.serialize());\r
 616                 for (i = 0, len = d.length; i < len; i++) {\r
 617                     filters.push({\r
 618                         field: f.dataIndex,\r
 619                         data: d[i]\r
 620                     });\r
 621                 }\r
 622             }\r
 623         });\r
 624         return filters;\r
 625     },\r
 626 \r
 627     /**\r
 628      * Function to take the active filters data and build it into a query.\r
 629      * The format of the query depends on the <code>{@link #encode}</code>\r
 630      * configuration:\r
 631      * <div class="mdetail-params"><ul>\r
 632      *\r
 633      * <li><b><tt>false</tt></b> : <i>Default</i>\r
 634      * <div class="sub-desc">\r
 635      * Flatten into query string of the form (assuming <code>{@link #paramPrefix}='filters'</code>:\r
 636      * <pre><code>\r
 637 filters[0][field]="someDataIndex"&\r
 638 filters[0][data][comparison]="someValue1"&\r
 639 filters[0][data][type]="someValue2"&\r
 640 filters[0][data][value]="someValue3"&\r
 641      * </code></pre>\r
 642      * </div></li>\r
 643      * <li><b><tt>true</tt></b> :\r
 644      * <div class="sub-desc">\r
 645      * JSON encode the filter data\r
 646      * <pre><code>\r
 647 filters[0][field]="someDataIndex"&\r
 648 filters[0][data][comparison]="someValue1"&\r
 649 filters[0][data][type]="someValue2"&\r
 650 filters[0][data][value]="someValue3"&\r
 651      * </code></pre>\r
 652      * </div></li>\r
 653      * </ul></div>\r
 654      * Override this method to customize the format of the filter query for remote requests.\r
 655      * @param {Array} filters A collection of objects representing active filters and their configuration.\r
 656      *    Each element will take the form of {field: dataIndex, data: filterConf}. dataIndex is not assured\r
 657      *    to be unique as any one filter may be a composite of more basic filters for the same dataIndex.\r
 658      * @return {Object} Query keys and values\r
 659      */\r
 660     buildQuery : function (filters) {\r
 661         var p = {}, i, f, root, dataPrefix, key, tmp,\r
 662             len = filters.length;\r
 663 \r
 664         if (!this.encode){\r
 665             for (i = 0; i < len; i++) {\r
 666                 f = filters[i];\r
 667                 root = [this.paramPrefix, '[', i, ']'].join('');\r
 668                 p[root + '[field]'] = f.field;\r
 669 \r
 670                 dataPrefix = root + '[data]';\r
 671                 for (key in f.data) {\r
 672                     p[[dataPrefix, '[', key, ']'].join('')] = f.data[key];\r
 673                 }\r
 674             }\r
 675         } else {\r
 676             tmp = [];\r
 677             for (i = 0; i < len; i++) {\r
 678                 f = filters[i];\r
 679                 tmp.push(Ext.apply(\r
 680                     {},\r
 681                     {field: f.field},\r
 682                     f.data\r
 683                 ));\r
 684             }\r
 685             // only build if there is active filter\r
 686             if (tmp.length > 0){\r
 687                 p[this.paramPrefix] = Ext.util.JSON.encode(tmp);\r
 688             }\r
 689         }\r
 690         return p;\r
 691     },\r
 692 \r
 693     /**\r
 694      * Removes filter related query parameters from the provided object.\r
 695      * @param {Object} p Query parameters that may contain filter related fields.\r
 696      */\r
 697     cleanParams : function (p) {\r
 698         // if encoding just delete the property\r
 699         if (this.encode) {\r
 700             delete p[this.paramPrefix];\r
 701         // otherwise scrub the object of filter data\r
 702         } else {\r
 703             var regex, key;\r
 704             regex = new RegExp('^' + this.paramPrefix + '\[[0-9]+\]');\r
 705             for (key in p) {\r
 706                 if (regex.test(key)) {\r
 707                     delete p[key];\r
 708                 }\r
 709             }\r
 710         }\r
 711     },\r
 712 \r
 713     /**\r
 714      * Function for locating filter classes, overwrite this with your favorite\r
 715      * loader to provide dynamic filter loading.\r
 716      * @param {String} type The type of filter to load ('Filter' is automatically\r
 717      * appended to the passed type; eg, 'string' becomes 'StringFilter').\r
 718      * @return {Class} The Ext.ux.grid.filter.Class\r
 719      */\r
 720     getFilterClass : function (type) {\r
 721         // map the supported Ext.data.Field type values into a supported filter\r
 722         switch(type) {\r
 723             case 'auto':\r
 724               type = 'string';\r
 725               break;\r
 726             case 'int':\r
 727             case 'float':\r
 728               type = 'numeric';\r
 729               break;\r
 730         }\r
 731         return Ext.ux.grid.filter[type.substr(0, 1).toUpperCase() + type.substr(1) + 'Filter'];\r
 732     }\r
 733 });\r
 734 \r
 735 // register ptype\r
 736 Ext.preg('gridfilters', Ext.ux.grid.GridFilters);\r