examples/ux/gridfilters/GridFilters.js

   1 /*!
   2  * Ext JS Library 3.1.0
   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         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             hds, i, len, filter;\r
 484         if (view.mainHd) {\r
 485             hds = view.mainHd.select('td').removeClass(this.filterCls);\r
 486             for (i = 0, len = view.cm.config.length; i < len; i++) {\r
 487                 filter = this.getFilter(view.cm.config[i].dataIndex);\r
 488                 if (filter && filter.active) {\r
 489                     hds.item(i).addClass(this.filterCls);\r
 490                 }\r
 491             }\r
 492         }\r
 493     },\r
 494     \r
 495     /** @private */\r
 496     reload : function () {\r
 497         if (this.local) {\r
 498             this.grid.store.clearFilter(true);\r
 499             this.grid.store.filterBy(this.getRecordFilter());\r
 500         } else {\r
 501             var start,\r
 502                 store = this.grid.store;\r
 503             this.deferredUpdate.cancel();\r
 504             if (this.toolbar) {\r
 505                 start = store.paramNames.start;\r
 506                 if (store.lastOptions && store.lastOptions.params && store.lastOptions.params[start]) {\r
 507                     store.lastOptions.params[start] = 0;\r
 508                 }\r
 509             }\r
 510             store.reload();\r
 511         }\r
 512     },\r
 513     \r
 514     /**\r
 515      * Method factory that generates a record validator for the filters active at the time\r
 516      * of invokation.\r
 517      * @private\r
 518      */\r
 519     getRecordFilter : function () {\r
 520         var f = [], len, i;\r
 521         this.filters.each(function (filter) {\r
 522             if (filter.active) {\r
 523                 f.push(filter);\r
 524             }\r
 525         });\r
 526         \r
 527         len = f.length;\r
 528         return function (record) {\r
 529             for (i = 0; i < len; i++) {\r
 530                 if (!f[i].validateRecord(record)) {\r
 531                     return false;\r
 532                 }\r
 533             }\r
 534             return true;\r
 535         };\r
 536     },\r
 537     \r
 538     /**\r
 539      * Adds a filter to the collection and observes it for state change.\r
 540      * @param {Object/Ext.ux.grid.filter.Filter} config A filter configuration or a filter object.\r
 541      * @return {Ext.ux.grid.filter.Filter} The existing or newly created filter object.\r
 542      */\r
 543     addFilter : function (config) {\r
 544         var Cls = this.getFilterClass(config.type),\r
 545             filter = config.menu ? config : (new Cls(config));\r
 546         this.filters.add(filter);\r
 547         \r
 548         Ext.util.Observable.capture(filter, this.onStateChange, this);\r
 549         return filter;\r
 550     },\r
 551 \r
 552     /**\r
 553      * Adds filters to the collection.\r
 554      * @param {Array/Ext.grid.ColumnModel} filters Either an Array of\r
 555      * filter configuration objects or an Ext.grid.ColumnModel.  The columns\r
 556      * of a passed Ext.grid.ColumnModel will be examined for a <code>filter</code>\r
 557      * property and, if present, will be used as the filter configuration object.   \r
 558      */\r
 559     addFilters : function (filters) {\r
 560         if (filters) {\r
 561             var i, len, filter, cm = false, dI;\r
 562             if (filters instanceof Ext.grid.ColumnModel) {\r
 563                 filters = filters.config;\r
 564                 cm = true;\r
 565             }\r
 566             for (i = 0, len = filters.length; i < len; i++) {\r
 567                 filter = false;\r
 568                 if (cm) {\r
 569                     dI = filters[i].dataIndex;\r
 570                     filter = filters[i].filter || filters[i].filterable;\r
 571                     if (filter){\r
 572                         filter = (filter === true) ? {} : filter;\r
 573                         Ext.apply(filter, {dataIndex:dI});\r
 574                         // filter type is specified in order of preference:\r
 575                         //     filter type specified in config\r
 576                         //     type specified in store's field's type config\r
 577                         filter.type = filter.type || this.store.fields.get(dI).type;  \r
 578                     }\r
 579                 } else {\r
 580                     filter = filters[i];\r
 581                 }\r
 582                 // if filter config found add filter for the column \r
 583                 if (filter) {\r
 584                     this.addFilter(filter);\r
 585                 }\r
 586             }\r
 587         }\r
 588     },\r
 589     \r
 590     /**\r
 591      * Returns a filter for the given dataIndex, if one exists.\r
 592      * @param {String} dataIndex The dataIndex of the desired filter object.\r
 593      * @return {Ext.ux.grid.filter.Filter}\r
 594      */\r
 595     getFilter : function (dataIndex) {\r
 596         return this.filters.get(dataIndex);\r
 597     },\r
 598 \r
 599     /**\r
 600      * Turns all filters off. This does not clear the configuration information\r
 601      * (see {@link #removeAll}).\r
 602      */\r
 603     clearFilters : function () {\r
 604         this.filters.each(function (filter) {\r
 605             filter.setActive(false);\r
 606         });\r
 607     },\r
 608 \r
 609     /**\r
 610      * Returns an Array of the currently active filters.\r
 611      * @return {Array} filters Array of the currently active filters.\r
 612      */\r
 613     getFilterData : function () {\r
 614         var filters = [], i, len;\r
 615 \r
 616         this.filters.each(function (f) {\r
 617             if (f.active) {\r
 618                 var d = [].concat(f.serialize());\r
 619                 for (i = 0, len = d.length; i < len; i++) {\r
 620                     filters.push({\r
 621                         field: f.dataIndex,\r
 622                         data: d[i]\r
 623                     });\r
 624                 }\r
 625             }\r
 626         });\r
 627         return filters;\r
 628     },\r
 629     \r
 630     /**\r
 631      * Function to take the active filters data and build it into a query.\r
 632      * The format of the query depends on the <code>{@link #encode}</code>\r
 633      * configuration:\r
 634      * <div class="mdetail-params"><ul>\r
 635      * \r
 636      * <li><b><tt>false</tt></b> : <i>Default</i>\r
 637      * <div class="sub-desc">\r
 638      * Flatten into query string of the form (assuming <code>{@link #paramPrefix}='filters'</code>:\r
 639      * <pre><code>\r
 640 filters[0][field]="someDataIndex"&\r
 641 filters[0][data][comparison]="someValue1"&\r
 642 filters[0][data][type]="someValue2"&\r
 643 filters[0][data][value]="someValue3"&\r
 644      * </code></pre>\r
 645      * </div></li>\r
 646      * <li><b><tt>true</tt></b> : \r
 647      * <div class="sub-desc">\r
 648      * JSON encode the filter data\r
 649      * <pre><code>\r
 650 filters[0][field]="someDataIndex"&\r
 651 filters[0][data][comparison]="someValue1"&\r
 652 filters[0][data][type]="someValue2"&\r
 653 filters[0][data][value]="someValue3"&\r
 654      * </code></pre>\r
 655      * </div></li>\r
 656      * </ul></div>\r
 657      * Override this method to customize the format of the filter query for remote requests.\r
 658      * @param {Array} filters A collection of objects representing active filters and their configuration.\r
 659      *    Each element will take the form of {field: dataIndex, data: filterConf}. dataIndex is not assured\r
 660      *    to be unique as any one filter may be a composite of more basic filters for the same dataIndex.\r
 661      * @return {Object} Query keys and values\r
 662      */\r
 663     buildQuery : function (filters) {\r
 664         var p = {}, i, f, root, dataPrefix, key, tmp,\r
 665             len = filters.length;\r
 666 \r
 667         if (!this.encode){\r
 668             for (i = 0; i < len; i++) {\r
 669                 f = filters[i];\r
 670                 root = [this.paramPrefix, '[', i, ']'].join('');\r
 671                 p[root + '[field]'] = f.field;\r
 672                 \r
 673                 dataPrefix = root + '[data]';\r
 674                 for (key in f.data) {\r
 675                     p[[dataPrefix, '[', key, ']'].join('')] = f.data[key];\r
 676                 }\r
 677             }\r
 678         } else {\r
 679             tmp = [];\r
 680             for (i = 0; i < len; i++) {\r
 681                 f = filters[i];\r
 682                 tmp.push(Ext.apply(\r
 683                     {},\r
 684                     {field: f.field},\r
 685                     f.data\r
 686                 ));\r
 687             }\r
 688             // only build if there is active filter \r
 689             if (tmp.length > 0){\r
 690                 p[this.paramPrefix] = Ext.util.JSON.encode(tmp);\r
 691             }\r
 692         }\r
 693         return p;\r
 694     },\r
 695     \r
 696     /**\r
 697      * Removes filter related query parameters from the provided object.\r
 698      * @param {Object} p Query parameters that may contain filter related fields.\r
 699      */\r
 700     cleanParams : function (p) {\r
 701         // if encoding just delete the property\r
 702         if (this.encode) {\r
 703             delete p[this.paramPrefix];\r
 704         // otherwise scrub the object of filter data\r
 705         } else {\r
 706             var regex, key;\r
 707             regex = new RegExp('^' + this.paramPrefix + '\[[0-9]+\]');\r
 708             for (key in p) {\r
 709                 if (regex.test(key)) {\r
 710                     delete p[key];\r
 711                 }\r
 712             }\r
 713         }\r
 714     },\r
 715     \r
 716     /**\r
 717      * Function for locating filter classes, overwrite this with your favorite\r
 718      * loader to provide dynamic filter loading.\r
 719      * @param {String} type The type of filter to load ('Filter' is automatically\r
 720      * appended to the passed type; eg, 'string' becomes 'StringFilter').\r
 721      * @return {Class} The Ext.ux.grid.filter.Class \r
 722      */\r
 723     getFilterClass : function (type) {\r
 724         // map the supported Ext.data.Field type values into a supported filter\r
 725         switch(type) {\r
 726             case 'auto':\r
 727               type = 'string';\r
 728               break;\r
 729             case 'int':\r
 730             case 'float':\r
 731               type = 'numeric';\r
 732               break;\r
 733         }\r
 734         return Ext.ux.grid.filter[type.substr(0, 1).toUpperCase() + type.substr(1) + 'Filter'];\r
 735     }\r
 736 });\r
 737 \r
 738 // register ptype\r
 739 Ext.preg('gridfilters', Ext.ux.grid.GridFilters);\r