examples/ux/gridfilters/GridFilters.js

   1 /*!
   2  * Ext JS Library 3.0.3
   3  * Copyright(c) 2006-2009 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         this.deferredUpdate = new Ext.util.DelayedTask(this.reload, this);\r
 185         this.filters = new Ext.util.MixedCollection();\r
 186         this.filters.getKey = function (o) {\r
 187             return o ? o.dataIndex : null;\r
 188         };\r
 189         this.addFilters(config.filters);\r
 190         delete config.filters;\r
 191         Ext.apply(this, config);\r
 192     },\r
 193 \r
 194     /** @private */\r
 195     init : function (grid) {\r
 196         if (grid instanceof Ext.grid.GridPanel) {\r
 197             this.grid = grid;\r
 198 \r
 199             this.bindStore(this.grid.getStore(), true);\r
 200           \r
 201             this.grid.filters = this;\r
 202              \r
 203             this.grid.addEvents({'filterupdate': true});\r
 204               \r
 205             grid.on({\r
 206                 scope: this,\r
 207                 beforestaterestore: this.applyState,\r
 208                 beforestatesave: this.saveState,\r
 209                 beforedestroy: this.destroy,\r
 210                 reconfigure: this.onReconfigure\r
 211             });\r
 212             \r
 213             if (grid.rendered){\r
 214                 this.onRender();\r
 215             } else {\r
 216                 grid.on({\r
 217                     scope: this,\r
 218                     single: true,\r
 219                     render: this.onRender\r
 220                 });\r
 221             }\r
 222                       \r
 223         } else if (grid instanceof Ext.PagingToolbar) {\r
 224             this.toolbar = grid;\r
 225         }\r
 226     },\r
 227         \r
 228     /**\r
 229      * @private\r
 230      * Handler for the grid's beforestaterestore event (fires before the state of the\r
 231      * grid is restored).\r
 232      * @param {Object} grid The grid object\r
 233      * @param {Object} state The hash of state values returned from the StateProvider.\r
 234      */   \r
 235     applyState : function (grid, state) {\r
 236         var key, filter;\r
 237         this.applyingState = true;\r
 238         this.clearFilters();\r
 239         if (state.filters) {\r
 240             for (key in state.filters) {\r
 241                 filter = this.filters.get(key);\r
 242                 if (filter) {\r
 243                     filter.setValue(state.filters[key]);\r
 244                     filter.setActive(true);\r
 245                 }\r
 246             }\r
 247         }\r
 248         this.deferredUpdate.cancel();\r
 249         if (this.local) {\r
 250             this.reload();\r
 251         }\r
 252         delete this.applyingState;\r
 253     },\r
 254     \r
 255     /**\r
 256      * Saves the state of all active filters\r
 257      * @param {Object} grid\r
 258      * @param {Object} state\r
 259      * @return {Boolean}\r
 260      */\r
 261     saveState : function (grid, state) {\r
 262         var filters = {};\r
 263         this.filters.each(function (filter) {\r
 264             if (filter.active) {\r
 265                 filters[filter.dataIndex] = filter.getValue();\r
 266             }\r
 267         });\r
 268         return (state.filters = filters);\r
 269     },\r
 270     \r
 271     /**\r
 272      * @private\r
 273      * Handler called when the grid is rendered\r
 274      */    \r
 275     onRender : function () {\r
 276         this.grid.getView().on('refresh', this.onRefresh, this);\r
 277         this.createMenu();\r
 278     },\r
 279 \r
 280     /**\r
 281      * @private\r
 282      * Handler called by the grid 'beforedestroy' event\r
 283      */    \r
 284     destroy : function () {\r
 285         this.removeAll();\r
 286         this.purgeListeners();\r
 287 \r
 288         if(this.filterMenu){\r
 289             Ext.menu.MenuMgr.unregister(this.filterMenu);\r
 290             this.filterMenu.destroy();\r
 291              this.filterMenu = this.menu.menu = null;            \r
 292         }\r
 293     },\r
 294 \r
 295     /**\r
 296      * Remove all filters, permanently destroying them.\r
 297      */    \r
 298     removeAll : function () {\r
 299         if(this.filters){\r
 300             Ext.destroy.apply(Ext, this.filters.items);\r
 301             // remove all items from the collection \r
 302             this.filters.clear();\r
 303         }\r
 304     },\r
 305 \r
 306 \r
 307     /**\r
 308      * Changes the data store bound to this view and refreshes it.\r
 309      * @param {Store} store The store to bind to this view\r
 310      */\r
 311     bindStore : function(store, initial){\r
 312         if(!initial && this.store){\r
 313             if (this.local) {\r
 314                 store.un('load', this.onLoad, this);\r
 315             } else {\r
 316                 store.un('beforeload', this.onBeforeLoad, this);\r
 317             }\r
 318         }\r
 319         if(store){\r
 320             if (this.local) {\r
 321                 store.on('load', this.onLoad, this);\r
 322             } else {\r
 323                 store.on('beforeload', this.onBeforeLoad, this);\r
 324             }\r
 325         }\r
 326         this.store = store;\r
 327     },\r
 328 \r
 329     /**\r
 330      * @private\r
 331      * Handler called when the grid reconfigure event fires\r
 332      */    \r
 333     onReconfigure : function () {\r
 334         this.bindStore(this.grid.getStore());\r
 335         this.store.clearFilter();\r
 336         this.removeAll();\r
 337         this.addFilters(this.grid.getColumnModel());\r
 338         this.updateColumnHeadings();\r
 339     },\r
 340 \r
 341     createMenu : function () {\r
 342         var view = this.grid.getView(),\r
 343             hmenu = view.hmenu;\r
 344 \r
 345         if (this.showMenu && hmenu) {\r
 346             \r
 347             this.sep  = hmenu.addSeparator();\r
 348             this.filterMenu = new Ext.menu.Menu({\r
 349                 id: this.grid.id + '-filters-menu'\r
 350             }); \r
 351             this.menu = hmenu.add({\r
 352                 checked: false,\r
 353                 itemId: 'filters',\r
 354                 text: this.menuFilterText,\r
 355                 menu: this.filterMenu\r
 356             });\r
 357 \r
 358             this.menu.on({\r
 359                 scope: this,\r
 360                 checkchange: this.onCheckChange,\r
 361                 beforecheckchange: this.onBeforeCheck\r
 362             });\r
 363             hmenu.on('beforeshow', this.onMenu, this);\r
 364         }\r
 365         this.updateColumnHeadings();\r
 366     },\r
 367 \r
 368     /**\r
 369      * @private\r
 370      * Get the filter menu from the filters MixedCollection based on the clicked header\r
 371      */\r
 372     getMenuFilter : function () {\r
 373         var view = this.grid.getView();\r
 374         if (!view || view.hdCtxIndex === undefined) {\r
 375             return null;\r
 376         }\r
 377         return this.filters.get(\r
 378             view.cm.config[view.hdCtxIndex].dataIndex\r
 379         );\r
 380     },\r
 381 \r
 382     /**\r
 383      * @private\r
 384      * Handler called by the grid's hmenu beforeshow event\r
 385      */    \r
 386     onMenu : function (filterMenu) {\r
 387         var filter = this.getMenuFilter();\r
 388 \r
 389         if (filter) {\r
 390 /*            \r
 391 TODO: lazy rendering\r
 392             if (!filter.menu) {\r
 393                 filter.menu = filter.createMenu();\r
 394             }\r
 395 */\r
 396             this.menu.menu = filter.menu;\r
 397             this.menu.setChecked(filter.active, false);\r
 398             // disable the menu if filter.disabled explicitly set to true\r
 399             this.menu.setDisabled(filter.disabled === true);\r
 400         }\r
 401         \r
 402         this.menu.setVisible(filter !== undefined);\r
 403         this.sep.setVisible(filter !== undefined);\r
 404     },\r
 405     \r
 406     /** @private */\r
 407     onCheckChange : function (item, value) {\r
 408         this.getMenuFilter().setActive(value);\r
 409     },\r
 410     \r
 411     /** @private */\r
 412     onBeforeCheck : function (check, value) {\r
 413         return !value || this.getMenuFilter().isActivatable();\r
 414     },\r
 415 \r
 416     /**\r
 417      * @private\r
 418      * Handler for all events on filters.\r
 419      * @param {String} event Event name\r
 420      * @param {Object} filter Standard signature of the event before the event is fired\r
 421      */   \r
 422     onStateChange : function (event, filter) {\r
 423         if (event === 'serialize') {\r
 424             return;\r
 425         }\r
 426 \r
 427         if (filter == this.getMenuFilter()) {\r
 428             this.menu.setChecked(filter.active, false);\r
 429         }\r
 430 \r
 431         if ((this.autoReload || this.local) && !this.applyingState) {\r
 432             this.deferredUpdate.delay(this.updateBuffer);\r
 433         }\r
 434         this.updateColumnHeadings();\r
 435             \r
 436         if (!this.applyingState) {\r
 437             this.grid.saveState();\r
 438         }    \r
 439         this.grid.fireEvent('filterupdate', this, filter);\r
 440     },\r
 441     \r
 442     /**\r
 443      * @private\r
 444      * Handler for store's beforeload event when configured for remote filtering\r
 445      * @param {Object} store\r
 446      * @param {Object} options\r
 447      */\r
 448     onBeforeLoad : function (store, options) {\r
 449         options.params = options.params || {};\r
 450         this.cleanParams(options.params);               \r
 451         var params = this.buildQuery(this.getFilterData());\r
 452         Ext.apply(options.params, params);\r
 453     },\r
 454     \r
 455     /**\r
 456      * @private\r
 457      * Handler for store's load event when configured for local filtering\r
 458      * @param {Object} store\r
 459      * @param {Object} options\r
 460      */\r
 461     onLoad : function (store, options) {\r
 462         store.filterBy(this.getRecordFilter());\r
 463     },\r
 464 \r
 465     /**\r
 466      * @private\r
 467      * Handler called when the grid's view is refreshed\r
 468      */    \r
 469     onRefresh : function () {\r
 470         this.updateColumnHeadings();\r
 471     },\r
 472 \r
 473     /**\r
 474      * Update the styles for the header row based on the active filters\r
 475      */    \r
 476     updateColumnHeadings : function () {\r
 477         var view = this.grid.getView(),\r
 478             hds, i, len, filter;\r
 479         if (view.mainHd) {\r
 480             hds = view.mainHd.select('td').removeClass(this.filterCls);\r
 481             for (i = 0, len = view.cm.config.length; i < len; i++) {\r
 482                 filter = this.getFilter(view.cm.config[i].dataIndex);\r
 483                 if (filter && filter.active) {\r
 484                     hds.item(i).addClass(this.filterCls);\r
 485                 }\r
 486             }\r
 487         }\r
 488     },\r
 489     \r
 490     /** @private */\r
 491     reload : function () {\r
 492         if (this.local) {\r
 493             this.grid.store.clearFilter(true);\r
 494             this.grid.store.filterBy(this.getRecordFilter());\r
 495         } else {\r
 496             var start,\r
 497                 store = this.grid.store;\r
 498             this.deferredUpdate.cancel();\r
 499             if (this.toolbar) {\r
 500                 start = store.paramNames.start;\r
 501                 if (store.lastOptions && store.lastOptions.params && store.lastOptions.params[start]) {\r
 502                     store.lastOptions.params[start] = 0;\r
 503                 }\r
 504             }\r
 505             store.reload();\r
 506         }\r
 507     },\r
 508     \r
 509     /**\r
 510      * Method factory that generates a record validator for the filters active at the time\r
 511      * of invokation.\r
 512      * @private\r
 513      */\r
 514     getRecordFilter : function () {\r
 515         var f = [], len, i;\r
 516         this.filters.each(function (filter) {\r
 517             if (filter.active) {\r
 518                 f.push(filter);\r
 519             }\r
 520         });\r
 521         \r
 522         len = f.length;\r
 523         return function (record) {\r
 524             for (i = 0; i < len; i++) {\r
 525                 if (!f[i].validateRecord(record)) {\r
 526                     return false;\r
 527                 }\r
 528             }\r
 529             return true;\r
 530         };\r
 531     },\r
 532     \r
 533     /**\r
 534      * Adds a filter to the collection and observes it for state change.\r
 535      * @param {Object/Ext.ux.grid.filter.Filter} config A filter configuration or a filter object.\r
 536      * @return {Ext.ux.grid.filter.Filter} The existing or newly created filter object.\r
 537      */\r
 538     addFilter : function (config) {\r
 539         var Cls = this.getFilterClass(config.type),\r
 540             filter = config.menu ? config : (new Cls(config));\r
 541         this.filters.add(filter);\r
 542         \r
 543         Ext.util.Observable.capture(filter, this.onStateChange, this);\r
 544         return filter;\r
 545     },\r
 546 \r
 547     /**\r
 548      * Adds filters to the collection.\r
 549      * @param {Array/Ext.grid.ColumnModel} filters Either an Array of\r
 550      * filter configuration objects or an Ext.grid.ColumnModel.  The columns\r
 551      * of a passed Ext.grid.ColumnModel will be examined for a <code>filter</code>\r
 552      * property and, if present, will be used as the filter configuration object.   \r
 553      */\r
 554     addFilters : function (filters) {\r
 555         if (filters) {\r
 556             var i, len, filter, cm = false, dI;\r
 557             if (filters instanceof Ext.grid.ColumnModel) {\r
 558                 filters = filters.config;\r
 559                 cm = true;\r
 560             }\r
 561             for (i = 0, len = filters.length; i < len; i++) {\r
 562                 filter = false;\r
 563                 if (cm) {\r
 564                     dI = filters[i].dataIndex;\r
 565                     filter = filters[i].filter || filters[i].filterable;\r
 566                     if (filter){\r
 567                         filter = (filter === true) ? {} : filter;\r
 568                         Ext.apply(filter, {dataIndex:dI});\r
 569                         // filter type is specified in order of preference:\r
 570                         //     filter type specified in config\r
 571                         //     type specified in store's field's type config\r
 572                         filter.type = filter.type || this.store.fields.get(dI).type;  \r
 573                     }\r
 574                 } else {\r
 575                     filter = filters[i];\r
 576                 }\r
 577                 // if filter config found add filter for the column \r
 578                 if (filter) {\r
 579                     this.addFilter(filter);\r
 580                 }\r
 581             }\r
 582         }\r
 583     },\r
 584     \r
 585     /**\r
 586      * Returns a filter for the given dataIndex, if one exists.\r
 587      * @param {String} dataIndex The dataIndex of the desired filter object.\r
 588      * @return {Ext.ux.grid.filter.Filter}\r
 589      */\r
 590     getFilter : function (dataIndex) {\r
 591         return this.filters.get(dataIndex);\r
 592     },\r
 593 \r
 594     /**\r
 595      * Turns all filters off. This does not clear the configuration information\r
 596      * (see {@link #removeAll}).\r
 597      */\r
 598     clearFilters : function () {\r
 599         this.filters.each(function (filter) {\r
 600             filter.setActive(false);\r
 601         });\r
 602     },\r
 603 \r
 604     /**\r
 605      * Returns an Array of the currently active filters.\r
 606      * @return {Array} filters Array of the currently active filters.\r
 607      */\r
 608     getFilterData : function () {\r
 609         var filters = [], i, len;\r
 610 \r
 611         this.filters.each(function (f) {\r
 612             if (f.active) {\r
 613                 var d = [].concat(f.serialize());\r
 614                 for (i = 0, len = d.length; i < len; i++) {\r
 615                     filters.push({\r
 616                         field: f.dataIndex,\r
 617                         data: d[i]\r
 618                     });\r
 619                 }\r
 620             }\r
 621         });\r
 622         return filters;\r
 623     },\r
 624     \r
 625     /**\r
 626      * Function to take the active filters data and build it into a query.\r
 627      * The format of the query depends on the <code>{@link #encode}</code>\r
 628      * configuration:\r
 629      * <div class="mdetail-params"><ul>\r
 630      * \r
 631      * <li><b><tt>false</tt></b> : <i>Default</i>\r
 632      * <div class="sub-desc">\r
 633      * Flatten into query string of the form (assuming <code>{@link #paramPrefix}='filters'</code>:\r
 634      * <pre><code>\r
 635 filters[0][field]="someDataIndex"&\r
 636 filters[0][data][comparison]="someValue1"&\r
 637 filters[0][data][type]="someValue2"&\r
 638 filters[0][data][value]="someValue3"&\r
 639      * </code></pre>\r
 640      * </div></li>\r
 641      * <li><b><tt>true</tt></b> : \r
 642      * <div class="sub-desc">\r
 643      * JSON encode the filter data\r
 644      * <pre><code>\r
 645 filters[0][field]="someDataIndex"&\r
 646 filters[0][data][comparison]="someValue1"&\r
 647 filters[0][data][type]="someValue2"&\r
 648 filters[0][data][value]="someValue3"&\r
 649      * </code></pre>\r
 650      * </div></li>\r
 651      * </ul></div>\r
 652      * Override this method to customize the format of the filter query for remote requests.\r
 653      * @param {Array} filters A collection of objects representing active filters and their configuration.\r
 654      *    Each element will take the form of {field: dataIndex, data: filterConf}. dataIndex is not assured\r
 655      *    to be unique as any one filter may be a composite of more basic filters for the same dataIndex.\r
 656      * @return {Object} Query keys and values\r
 657      */\r
 658     buildQuery : function (filters) {\r
 659         var p = {}, i, f, root, dataPrefix, key, tmp,\r
 660             len = filters.length;\r
 661 \r
 662         if (!this.encode){\r
 663             for (i = 0; i < len; i++) {\r
 664                 f = filters[i];\r
 665                 root = [this.paramPrefix, '[', i, ']'].join('');\r
 666                 p[root + '[field]'] = f.field;\r
 667                 \r
 668                 dataPrefix = root + '[data]';\r
 669                 for (key in f.data) {\r
 670                     p[[dataPrefix, '[', key, ']'].join('')] = f.data[key];\r
 671                 }\r
 672             }\r
 673         } else {\r
 674             tmp = [];\r
 675             for (i = 0; i < len; i++) {\r
 676                 f = filters[i];\r
 677                 tmp.push(Ext.apply(\r
 678                     {},\r
 679                     {field: f.field},\r
 680                     f.data\r
 681                 ));\r
 682             }\r
 683             // only build if there is active filter \r
 684             if (tmp.length > 0){\r
 685                 p[this.paramPrefix] = Ext.util.JSON.encode(tmp);\r
 686             }\r
 687         }\r
 688         return p;\r
 689     },\r
 690     \r
 691     /**\r
 692      * Removes filter related query parameters from the provided object.\r
 693      * @param {Object} p Query parameters that may contain filter related fields.\r
 694      */\r
 695     cleanParams : function (p) {\r
 696         // if encoding just delete the property\r
 697         if (this.encode) {\r
 698             delete p[this.paramPrefix];\r
 699         // otherwise scrub the object of filter data\r
 700         } else {\r
 701             var regex, key;\r
 702             regex = new RegExp('^' + this.paramPrefix + '\[[0-9]+\]');\r
 703             for (key in p) {\r
 704                 if (regex.test(key)) {\r
 705                     delete p[key];\r
 706                 }\r
 707             }\r
 708         }\r
 709     },\r
 710     \r
 711     /**\r
 712      * Function for locating filter classes, overwrite this with your favorite\r
 713      * loader to provide dynamic filter loading.\r
 714      * @param {String} type The type of filter to load ('Filter' is automatically\r
 715      * appended to the passed type; eg, 'string' becomes 'StringFilter').\r
 716      * @return {Class} The Ext.ux.grid.filter.Class \r
 717      */\r
 718     getFilterClass : function (type) {\r
 719         // map the supported Ext.data.Field type values into a supported filter\r
 720         switch(type) {\r
 721             case 'auto':\r
 722               type = 'string';\r
 723               break;\r
 724             case 'int':\r
 725             case 'float':\r
 726               type = 'numeric';\r
 727               break;\r
 728         }\r
 729         return Ext.ux.grid.filter[type.substr(0, 1).toUpperCase() + type.substr(1) + 'Filter'];\r
 730     }\r
 731 });\r
 732 \r
 733 // register ptype\r
 734 Ext.preg('gridfilters', Ext.ux.grid.GridFilters);\r