Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Filter.html
index 302a1b4..1893b44 100644 (file)
+<!DOCTYPE html>
 <html>
 <head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>The source code</title>
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+  <style type="text/css">
+    .highlight { display: block; background-color: #ddd; }
+  </style>
+  <script type="text/javascript">
+    function highlight() {
+      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+    }
+  </script>
 </head>
-<body  onload="prettyPrint();">
-    <pre class="prettyprint lang-js">Ext.namespace('Ext.ux.grid.filter');\r
-\r
-<div id="cls-Ext.ux.grid.filter.Filter"></div>/** \r
- * @class Ext.ux.grid.filter.Filter\r
- * @extends Ext.util.Observable\r
- * Abstract base class for filter implementations.\r
- */\r
-Ext.ux.grid.filter.Filter = Ext.extend(Ext.util.Observable, {\r
-    <div id="cfg-Ext.ux.grid.filter.Filter-active"></div>/**\r
-     * @cfg {Boolean} active\r
-     * Indicates the initial status of the filter (defaults to false).\r
-     */\r
-    active : false,\r
-    <div id="prop-Ext.ux.grid.filter.Filter-active"></div>/**\r
-     * True if this filter is active.  Use setActive() to alter after configuration.\r
-     * @type Boolean\r
-     * @property active\r
-     */\r
-    <div id="cfg-Ext.ux.grid.filter.Filter-dataIndex"></div>/**\r
-     * @cfg {String} dataIndex \r
-     * The {@link Ext.data.Store} dataIndex of the field this filter represents.\r
-     * The dataIndex does not actually have to exist in the store.\r
-     */\r
-    dataIndex : null,\r
-    <div id="prop-Ext.ux.grid.filter.Filter-menu"></div>/**\r
-     * The filter configuration menu that will be installed into the filter submenu of a column menu.\r
-     * @type Ext.menu.Menu\r
-     * @property\r
-     */\r
-    menu : null,\r
-    <div id="cfg-Ext.ux.grid.filter.Filter-updateBuffer"></div>/**\r
-     * @cfg {Number} updateBuffer\r
-     * Number of milliseconds to wait after user interaction to fire an update. Only supported \r
-     * by filters: 'list', 'numeric', and 'string'. Defaults to 500.\r
-     */\r
-    updateBuffer : 500,\r
-\r
-    constructor : function (config) {\r
-        Ext.apply(this, config);\r
-            \r
-        this.addEvents(\r
-            <div id="event-Ext.ux.grid.filter.Filter-activate"></div>/**\r
-             * @event activate\r
-             * Fires when an inactive filter becomes active\r
-             * @param {Ext.ux.grid.filter.Filter} this\r
-             */\r
-            'activate',\r
-            <div id="event-Ext.ux.grid.filter.Filter-deactivate"></div>/**\r
-             * @event deactivate\r
-             * Fires when an active filter becomes inactive\r
-             * @param {Ext.ux.grid.filter.Filter} this\r
-             */\r
-            'deactivate',\r
-            <div id="event-Ext.ux.grid.filter.Filter-serialize"></div>/**\r
-             * @event serialize\r
-             * Fires after the serialization process. Use this to attach additional parameters to serialization\r
-             * data before it is encoded and sent to the server.\r
-             * @param {Array/Object} data A map or collection of maps representing the current filter configuration.\r
-             * @param {Ext.ux.grid.filter.Filter} filter The filter being serialized.\r
-             */\r
-            'serialize',\r
-            <div id="event-Ext.ux.grid.filter.Filter-update"></div>/**\r
-             * @event update\r
-             * Fires when a filter configuration has changed\r
-             * @param {Ext.ux.grid.filter.Filter} this The filter object.\r
-             */\r
-            'update'\r
-        );\r
-        Ext.ux.grid.filter.Filter.superclass.constructor.call(this);\r
-\r
-        this.menu = new Ext.menu.Menu();\r
-        this.init(config);\r
-        if(config && config.value){\r
-            this.setValue(config.value);\r
-            this.setActive(config.active !== false, true);\r
-            delete config.value;\r
-        }\r
-    },\r
-\r
-    <div id="method-Ext.ux.grid.filter.Filter-destroy"></div>/**\r
-     * Destroys this filter by purging any event listeners, and removing any menus.\r
-     */\r
-    destroy : function(){\r
-        if (this.menu){\r
-            this.menu.destroy();\r
-        }\r
-        this.purgeListeners();\r
-    },\r
-\r
-    <div id="prop-Ext.ux.grid.filter.Filter-init"></div>/**\r
-     * Template method to be implemented by all subclasses that is to\r
-     * initialize the filter and install required menu items.\r
-     * Defaults to Ext.emptyFn.\r
-     */\r
-    init : Ext.emptyFn,\r
-    \r
-    <div id="method-Ext.ux.grid.filter.Filter-getValue"></div>/**\r
-     * Template method to be implemented by all subclasses that is to\r
-     * get and return the value of the filter.\r
-     * Defaults to Ext.emptyFn.\r
-     * @return {Object} The 'serialized' form of this filter\r
-     * @methodOf Ext.ux.grid.filter.Filter\r
-     */\r
-    getValue : Ext.emptyFn,\r
-    \r
-    <div id="method-Ext.ux.grid.filter.Filter-setValue"></div>/**\r
-     * Template method to be implemented by all subclasses that is to\r
-     * set the value of the filter and fire the 'update' event.\r
-     * Defaults to Ext.emptyFn.\r
-     * @param {Object} data The value to set the filter\r
-     * @methodOf Ext.ux.grid.filter.Filter\r
-     */        \r
-    setValue : Ext.emptyFn,\r
-    \r
-    <div id="method-Ext.ux.grid.filter.Filter-isActivatable"></div>/**\r
-     * Template method to be implemented by all subclasses that is to\r
-     * return <tt>true</tt> if the filter has enough configuration information to be activated.\r
-     * Defaults to <tt>return true</tt>.\r
-     * @return {Boolean}\r
-     */\r
-    isActivatable : function(){\r
-        return true;\r
-    },\r
-    \r
-    <div id="prop-Ext.ux.grid.filter.Filter-getSerialArgs"></div>/**\r
-     * Template method to be implemented by all subclasses that is to\r
-     * get and return serialized filter data for transmission to the server.\r
-     * Defaults to Ext.emptyFn.\r
-     */\r
-    getSerialArgs : Ext.emptyFn,\r
-\r
-    <div id="method-Ext.ux.grid.filter.Filter-validateRecord"></div>/**\r
-     * Template method to be implemented by all subclasses that is to\r
-     * validates the provided Ext.data.Record against the filters configuration.\r
-     * Defaults to <tt>return true</tt>.\r
-     * @param {Ext.data.Record} record The record to validate\r
-     * @return {Boolean} true if the record is valid within the bounds\r
-     * of the filter, false otherwise.\r
-     */\r
-    validateRecord : function(){\r
-        return true;\r
-    },\r
-\r
-    <div id="method-Ext.ux.grid.filter.Filter-serialize"></div>/**\r
-     * Returns the serialized filter data for transmission to the server\r
-     * and fires the 'serialize' event.\r
-     * @return {Object/Array} An object or collection of objects containing\r
-     * key value pairs representing the current configuration of the filter.\r
-     * @methodOf Ext.ux.grid.filter.Filter\r
-     */\r
-    serialize : function(){\r
-        var args = this.getSerialArgs();\r
-        this.fireEvent('serialize', args, this);\r
-        return args;\r
-    },\r
-\r
-    /** @private */\r
-    fireUpdate : function(){\r
-        if (this.active) {\r
-            this.fireEvent('update', this);\r
-        }\r
-        this.setActive(this.isActivatable());\r
-    },\r
-    \r
-    <div id="method-Ext.ux.grid.filter.Filter-setActive"></div>/**\r
-     * Sets the status of the filter and fires the appropriate events.\r
-     * @param {Boolean} active        The new filter state.\r
-     * @param {Boolean} suppressEvent True to prevent events from being fired.\r
-     * @methodOf Ext.ux.grid.filter.Filter\r
-     */\r
-    setActive : function(active, suppressEvent){\r
-        if(this.active != active){\r
-            this.active = active;\r
-            if (suppressEvent !== true) {\r
-                this.fireEvent(active ? 'activate' : 'deactivate', this);\r
-            }\r
-        }\r
-    }    \r
+<body onload="prettyPrint(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext-util-Filter'>/**
+</span> * Represents a filter that can be applied to a {@link Ext.util.MixedCollection MixedCollection}. Can either simply
+ * filter on a property/value pair or pass in a filter function with custom logic. Filters are always used in the
+ * context of MixedCollections, though {@link Ext.data.Store Store}s frequently create them when filtering and searching
+ * on their records. Example usage:
+ *
+ *     //set up a fictional MixedCollection containing a few people to filter on
+ *     var allNames = new Ext.util.MixedCollection();
+ *     allNames.addAll([
+ *         {id: 1, name: 'Ed',    age: 25},
+ *         {id: 2, name: 'Jamie', age: 37},
+ *         {id: 3, name: 'Abe',   age: 32},
+ *         {id: 4, name: 'Aaron', age: 26},
+ *         {id: 5, name: 'David', age: 32}
+ *     ]);
+ *
+ *     var ageFilter = new Ext.util.Filter({
+ *         property: 'age',
+ *         value   : 32
+ *     });
+ *
+ *     var longNameFilter = new Ext.util.Filter({
+ *         filterFn: function(item) {
+ *             return item.name.length &gt; 4;
+ *         }
+ *     });
+ *
+ *     //a new MixedCollection with the 3 names longer than 4 characters
+ *     var longNames = allNames.filter(longNameFilter);
+ *
+ *     //a new MixedCollection with the 2 people of age 24:
+ *     var youngFolk = allNames.filter(ageFilter);
+ *
+ */
+Ext.define('Ext.util.Filter', {
+
+    /* Begin Definitions */
+
+    /* End Definitions */
+<span id='Ext-util-Filter-cfg-property'>    /**
+</span>     * @cfg {String} property
+     * The property to filter on. Required unless a {@link #filterFn} is passed
+     */
+    
+<span id='Ext-util-Filter-cfg-filterFn'>    /**
+</span>     * @cfg {Function} filterFn
+     * A custom filter function which is passed each item in the {@link Ext.util.MixedCollection} in turn. Should return
+     * true to accept each item or false to reject it
+     */
+    
+<span id='Ext-util-Filter-cfg-anyMatch'>    /**
+</span>     * @cfg {Boolean} anyMatch
+     * True to allow any match - no regex start/end line anchors will be added.
+     */
+    anyMatch: false,
+    
+<span id='Ext-util-Filter-cfg-exactMatch'>    /**
+</span>     * @cfg {Boolean} exactMatch
+     * True to force exact match (^ and $ characters added to the regex). Ignored if anyMatch is true.
+     */
+    exactMatch: false,
+    
+<span id='Ext-util-Filter-cfg-caseSensitive'>    /**
+</span>     * @cfg {Boolean} caseSensitive
+     * True to make the regex case sensitive (adds 'i' switch to regex).
+     */
+    caseSensitive: false,
+    
+<span id='Ext-util-Filter-cfg-root'>    /**
+</span>     * @cfg {String} root
+     * Optional root property. This is mostly useful when filtering a Store, in which case we set the root to 'data' to
+     * make the filter pull the {@link #property} out of the data object of each item
+     */
+
+<span id='Ext-util-Filter-method-constructor'>    /**
+</span>     * Creates new Filter.
+     * @param {Object} [config] Config object
+     */
+    constructor: function(config) {
+        var me = this;
+        Ext.apply(me, config);
+        
+        //we're aliasing filter to filterFn mostly for API cleanliness reasons, despite the fact it dirties the code here.
+        //Ext.util.Sorter takes a sorterFn property but allows .sort to be called - we do the same here
+        me.filter = me.filter || me.filterFn;
+        
+        if (me.filter === undefined) {
+            if (me.property === undefined || me.value === undefined) {
+                // Commented this out temporarily because it stops us using string ids in models. TODO: Remove this once
+                // Model has been updated to allow string ids
+                
+                // Ext.Error.raise(&quot;A Filter requires either a property or a filterFn to be set&quot;);
+            } else {
+                me.filter = me.createFilterFn();
+            }
+            
+            me.filterFn = me.filter;
+        }
+    },
+    
+<span id='Ext-util-Filter-method-createFilterFn'>    /**
+</span>     * @private
+     * Creates a filter function for the configured property/value/anyMatch/caseSensitive options for this Filter
+     */
+    createFilterFn: function() {
+        var me       = this,
+            matcher  = me.createValueMatcher(),
+            property = me.property;
+        
+        return function(item) {
+            var value = me.getRoot.call(me, item)[property];
+            return matcher === null ? value === null : matcher.test(value);
+        };
+    },
+    
+<span id='Ext-util-Filter-method-getRoot'>    /**
+</span>     * @private
+     * Returns the root property of the given item, based on the configured {@link #root} property
+     * @param {Object} item The item
+     * @return {Object} The root property of the object
+     */
+    getRoot: function(item) {
+        var root = this.root;
+        return root === undefined ? item : item[root];
+    },
+    
+<span id='Ext-util-Filter-method-createValueMatcher'>    /**
+</span>     * @private
+     * Returns a regular expression based on the given value and matching options
+     */
+    createValueMatcher : function() {
+        var me            = this,
+            value         = me.value,
+            anyMatch      = me.anyMatch,
+            exactMatch    = me.exactMatch,
+            caseSensitive = me.caseSensitive,
+            escapeRe      = Ext.String.escapeRegex;
+            
+        if (value === null) {
+            return value;
+        }
+        
+        if (!value.exec) { // not a regex
+            value = String(value);
+
+            if (anyMatch === true) {
+                value = escapeRe(value);
+            } else {
+                value = '^' + escapeRe(value);
+                if (exactMatch === true) {
+                    value += '$';
+                }
+            }
+            value = new RegExp(value, caseSensitive ? '' : 'i');
+         }
+         
+         return value;
+    }
 });</pre>
 </body>
-</html>
\ No newline at end of file
+</html>