examples/ux/grid/filter/Filter.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 /**
  16  * @class Ext.ux.grid.filter.Filter
  17  * @extends Ext.util.Observable
  18  * Abstract base class for filter implementations.
  19  */
  20 Ext.define('Ext.ux.grid.filter.Filter', {
  21     extend: 'Ext.util.Observable',
  22
  23     /**
  24      * @cfg {Boolean} active
  25      * Indicates the initial status of the filter (defaults to false).
  26      */
  27     active : false,
  28     /**
  29      * True if this filter is active.  Use setActive() to alter after configuration.
  30      * @type Boolean
  31      * @property active
  32      */
  33     /**
  34      * @cfg {String} dataIndex
  35      * The {@link Ext.data.Store} dataIndex of the field this filter represents.
  36      * The dataIndex does not actually have to exist in the store.
  37      */
  38     dataIndex : null,
  39     /**
  40      * The filter configuration menu that will be installed into the filter submenu of a column menu.
  41      * @type Ext.menu.Menu
  42      * @property
  43      */
  44     menu : null,
  45     /**
  46      * @cfg {Number} updateBuffer
  47      * Number of milliseconds to wait after user interaction to fire an update. Only supported
  48      * by filters: 'list', 'numeric', and 'string'. Defaults to 500.
  49      */
  50     updateBuffer : 500,
  51
  52     constructor : function (config) {
  53         Ext.apply(this, config);
  54
  55         this.addEvents(
  56             /**
  57              * @event activate
  58              * Fires when an inactive filter becomes active
  59              * @param {Ext.ux.grid.filter.Filter} this
  60              */
  61             'activate',
  62             /**
  63              * @event deactivate
  64              * Fires when an active filter becomes inactive
  65              * @param {Ext.ux.grid.filter.Filter} this
  66              */
  67             'deactivate',
  68             /**
  69              * @event serialize
  70              * Fires after the serialization process. Use this to attach additional parameters to serialization
  71              * data before it is encoded and sent to the server.
  72              * @param {Array/Object} data A map or collection of maps representing the current filter configuration.
  73              * @param {Ext.ux.grid.filter.Filter} filter The filter being serialized.
  74              */
  75             'serialize',
  76             /**
  77              * @event update
  78              * Fires when a filter configuration has changed
  79              * @param {Ext.ux.grid.filter.Filter} this The filter object.
  80              */
  81             'update'
  82         );
  83         Ext.ux.grid.filter.Filter.superclass.constructor.call(this);
  84
  85         // setting filtered to true on all filter instances ensures that the filter won't be blurred when the mouse leaves the component
  86         this.menu = this.createMenu(Ext.applyIf({filtered: true}, config));
  87         this.init(config);
  88         if(config && config.value){
  89             this.setValue(config.value);
  90             this.setActive(config.active !== false, true);
  91             delete config.value;
  92         }
  93     },
  94
  95     /**
  96      * Destroys this filter by purging any event listeners, and removing any menus.
  97      */
  98     destroy : function(){
  99         if (this.menu){
 100             this.menu.destroy();
 101         }
 102         this.clearListeners();
 103     },
 104
 105     /**
 106      * Template method to be implemented by all subclasses that is to
 107      * initialize the filter and install required menu items.
 108      * Defaults to Ext.emptyFn.
 109      */
 110     init : Ext.emptyFn,
 111
 112     /**
 113      * @private @override
 114      * Creates the Menu for this filter.
 115      * @param {Object} config Filter configuration
 116      * @return {Ext.menu.Menu}
 117      */
 118     createMenu: function(config) {
 119         return Ext.create('Ext.menu.Menu', config);
 120     },
 121
 122     /**
 123      * Template method to be implemented by all subclasses that is to
 124      * get and return the value of the filter.
 125      * Defaults to Ext.emptyFn.
 126      * @return {Object} The 'serialized' form of this filter
 127      * @methodOf Ext.ux.grid.filter.Filter
 128      */
 129     getValue : Ext.emptyFn,
 130
 131     /**
 132      * Template method to be implemented by all subclasses that is to
 133      * set the value of the filter and fire the 'update' event.
 134      * Defaults to Ext.emptyFn.
 135      * @param {Object} data The value to set the filter
 136      * @methodOf Ext.ux.grid.filter.Filter
 137      */
 138     setValue : Ext.emptyFn,
 139
 140     /**
 141      * Template method to be implemented by all subclasses that is to
 142      * return <tt>true</tt> if the filter has enough configuration information to be activated.
 143      * Defaults to <tt>return true</tt>.
 144      * @return {Boolean}
 145      */
 146     isActivatable : function(){
 147         return true;
 148     },
 149
 150     /**
 151      * Template method to be implemented by all subclasses that is to
 152      * get and return serialized filter data for transmission to the server.
 153      * Defaults to Ext.emptyFn.
 154      */
 155     getSerialArgs : Ext.emptyFn,
 156
 157     /**
 158      * Template method to be implemented by all subclasses that is to
 159      * validates the provided Ext.data.Record against the filters configuration.
 160      * Defaults to <tt>return true</tt>.
 161      * @param {Ext.data.Record} record The record to validate
 162      * @return {Boolean} true if the record is valid within the bounds
 163      * of the filter, false otherwise.
 164      */
 165     validateRecord : function(){
 166         return true;
 167     },
 168
 169     /**
 170      * Returns the serialized filter data for transmission to the server
 171      * and fires the 'serialize' event.
 172      * @return {Object/Array} An object or collection of objects containing
 173      * key value pairs representing the current configuration of the filter.
 174      * @methodOf Ext.ux.grid.filter.Filter
 175      */
 176     serialize : function(){
 177         var args = this.getSerialArgs();
 178         this.fireEvent('serialize', args, this);
 179         return args;
 180     },
 181
 182     /** @private */
 183     fireUpdate : function(){
 184         if (this.active) {
 185             this.fireEvent('update', this);
 186         }
 187         this.setActive(this.isActivatable());
 188     },
 189
 190     /**
 191      * Sets the status of the filter and fires the appropriate events.
 192      * @param {Boolean} active        The new filter state.
 193      * @param {Boolean} suppressEvent True to prevent events from being fired.
 194      * @methodOf Ext.ux.grid.filter.Filter
 195      */
 196     setActive : function(active, suppressEvent){
 197         if(this.active != active){
 198             this.active = active;
 199             if (suppressEvent !== true) {
 200                 this.fireEvent(active ? 'activate' : 'deactivate', this);
 201             }
 202         }
 203     }
 204 });
 205