Upgrade to ExtJS 3.2.0 - Released 03/30/2010
[extjs.git] / examples / ux / gridfilters / filter / DateFilter.js
index 96d4eb9..2f09879 100644 (file)
 /*!
- * Ext JS Library 3.1.1
- * Copyright(c) 2006-2010 Ext JS, LLC
+ * Ext JS Library 3.2.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
  * licensing@extjs.com
  * http://www.extjs.com/license
  */
-/** \r
- * @class Ext.ux.grid.filter.DateFilter\r
- * @extends Ext.ux.grid.filter.Filter\r
- * Filter by a configurable Ext.menu.DateMenu\r
- * <p><b><u>Example Usage:</u></b></p>\r
- * <pre><code>    \r
-var filters = new Ext.ux.grid.GridFilters({\r
-    ...\r
-    filters: [{\r
-        // required configs\r
-        type: 'date',\r
-        dataIndex: 'dateAdded',\r
-        \r
-        // optional configs\r
-        dateFormat: 'm/d/Y',  // default\r
-        beforeText: 'Before', // default\r
-        afterText: 'After',   // default\r
-        onText: 'On',         // default\r
-        pickerOpts: {\r
-            // any DateMenu configs\r
-        },\r
-\r
-        active: true // default is false\r
-    }]\r
-});\r
- * </code></pre>\r
- */\r
-Ext.ux.grid.filter.DateFilter = Ext.extend(Ext.ux.grid.filter.Filter, {\r
-    /**\r
-     * @cfg {String} afterText\r
-     * Defaults to 'After'.\r
-     */\r
-    afterText : 'After',\r
-    /**\r
-     * @cfg {String} beforeText\r
-     * Defaults to 'Before'.\r
-     */\r
-    beforeText : 'Before',\r
-    /**\r
-     * @cfg {Object} compareMap\r
-     * Map for assigning the comparison values used in serialization.\r
-     */\r
-    compareMap : {\r
-        before: 'lt',\r
-        after:  'gt',\r
-        on:     'eq'\r
-    },\r
-    /**\r
-     * @cfg {String} dateFormat\r
-     * The date format to return when using getValue.\r
-     * Defaults to 'm/d/Y'.\r
-     */\r
-    dateFormat : 'm/d/Y',\r
-\r
-    /**\r
-     * @cfg {Date} maxDate\r
-     * Allowable date as passed to the Ext.DatePicker\r
-     * Defaults to undefined.\r
-     */\r
-    /**\r
-     * @cfg {Date} minDate\r
-     * Allowable date as passed to the Ext.DatePicker\r
-     * Defaults to undefined.\r
-     */\r
-    /**\r
-     * @cfg {Array} menuItems\r
-     * The items to be shown in this menu\r
-     * Defaults to:<pre>\r
-     * menuItems : ['before', 'after', '-', 'on'],\r
-     * </pre>\r
-     */\r
-    menuItems : ['before', 'after', '-', 'on'],\r
-\r
-    /**\r
-     * @cfg {Object} menuItemCfgs\r
-     * Default configuration options for each menu item\r
-     */\r
-    menuItemCfgs : {\r
-        selectOnFocus: true,\r
-        width: 125\r
-    },\r
-\r
-    /**\r
-     * @cfg {String} onText\r
-     * Defaults to 'On'.\r
-     */\r
-    onText : 'On',\r
-    \r
-    /**\r
-     * @cfg {Object} pickerOpts\r
-     * Configuration options for the date picker associated with each field.\r
-     */\r
-    pickerOpts : {},\r
-\r
-    /**  \r
-     * @private\r
-     * Template method that is to initialize the filter and install required menu items.\r
-     */\r
-    init : function (config) {\r
-        var menuCfg, i, len, item, cfg, Cls;\r
-\r
-        menuCfg = Ext.apply(this.pickerOpts, {\r
-            minDate: this.minDate, \r
-            maxDate: this.maxDate, \r
-            format:  this.dateFormat,\r
-            listeners: {\r
-                scope: this,\r
-                select: this.onMenuSelect\r
-            }\r
-        });\r
-\r
-        this.fields = {};\r
-        for (i = 0, len = this.menuItems.length; i < len; i++) {\r
-            item = this.menuItems[i];\r
-            if (item !== '-') {\r
-                cfg = {\r
-                    itemId: 'range-' + item,\r
-                    text: this[item + 'Text'],\r
-                    menu: new Ext.menu.DateMenu(\r
-                        Ext.apply(menuCfg, {\r
-                            itemId: item\r
-                        })\r
-                    ),\r
-                    listeners: {\r
-                        scope: this,\r
-                        checkchange: this.onCheckChange\r
-                    }\r
-                };\r
-                Cls = Ext.menu.CheckItem;\r
-                item = this.fields[item] = new Cls(cfg);\r
-            }\r
-            //this.add(item);\r
-            this.menu.add(item);\r
-        }\r
-    },\r
-\r
-    onCheckChange : function () {\r
-        this.setActive(this.isActivatable());\r
-        this.fireEvent('update', this);\r
-    },\r
-\r
-    /**  \r
-     * @private\r
-     * Handler method called when there is a keyup event on an input\r
-     * item of this menu.\r
-     */\r
-    onInputKeyUp : function (field, e) {\r
-        var k = e.getKey();\r
-        if (k == e.RETURN && field.isValid()) {\r
-            e.stopEvent();\r
-            this.menu.hide(true);\r
-            return;\r
-        }\r
-    },\r
-\r
-    /**\r
-     * Handler for when the menu for a field fires the 'select' event\r
-     * @param {Object} date\r
-     * @param {Object} menuItem\r
-     * @param {Object} value\r
-     * @param {Object} picker\r
-     */\r
-    onMenuSelect : function (menuItem, value, picker) {\r
-        var fields = this.fields,\r
-            field = this.fields[menuItem.itemId];\r
-        \r
-        field.setChecked(true);\r
-        \r
-        if (field == fields.on) {\r
-            fields.before.setChecked(false, true);\r
-            fields.after.setChecked(false, true);\r
-        } else {\r
-            fields.on.setChecked(false, true);\r
-            if (field == fields.after && fields.before.menu.picker.value < value) {\r
-                fields.before.setChecked(false, true);\r
-            } else if (field == fields.before && fields.after.menu.picker.value > value) {\r
-                fields.after.setChecked(false, true);\r
-            }\r
-        }\r
-        this.fireEvent('update', this);\r
-    },\r
-\r
-    /**\r
-     * @private\r
-     * Template method that is to get and return the value of the filter.\r
-     * @return {String} The value of this filter\r
-     */\r
-    getValue : function () {\r
-        var key, result = {};\r
-        for (key in this.fields) {\r
-            if (this.fields[key].checked) {\r
-                result[key] = this.fields[key].menu.picker.getValue();\r
-            }\r
-        }\r
-        return result;\r
-    },\r
-\r
-    /**\r
-     * @private\r
-     * Template method that is to set the value of the filter.\r
-     * @param {Object} value The value to set the filter\r
-     * @param {Boolean} preserve true to preserve the checked status\r
-     * of the other fields.  Defaults to false, unchecking the\r
-     * other fields\r
-     */        \r
-    setValue : function (value, preserve) {\r
-        var key;\r
-        for (key in this.fields) {\r
-            if(value[key]){\r
-                this.fields[key].menu.picker.setValue(value[key]);\r
-                this.fields[key].setChecked(true);\r
-            } else if (!preserve) {\r
-                this.fields[key].setChecked(false);\r
-            }\r
-        }\r
-        this.fireEvent('update', this);\r
-    },\r
-\r
-    /**\r
-     * @private\r
-     * Template method that is to return <tt>true</tt> if the filter\r
-     * has enough configuration information to be activated.\r
-     * @return {Boolean}\r
-     */\r
-    isActivatable : function () {\r
-        var key;\r
-        for (key in this.fields) {\r
-            if (this.fields[key].checked) {\r
-                return true;\r
-            }\r
-        }\r
-        return false;\r
-    },\r
-\r
-    /**\r
-     * @private\r
-     * Template method that is to get and return serialized filter data for\r
-     * transmission to the server.\r
-     * @return {Object/Array} An object or collection of objects containing\r
-     * key value pairs representing the current configuration of the filter.\r
-     */\r
-    getSerialArgs : function () {\r
-        var args = [];\r
-        for (var key in this.fields) {\r
-            if(this.fields[key].checked){\r
-                args.push({\r
-                    type: 'date',\r
-                    comparison: this.compareMap[key],\r
-                    value: this.getFieldValue(key).format(this.dateFormat)\r
-                });\r
-            }\r
-        }\r
-        return args;\r
-    },\r
-\r
-    /**\r
-     * Get and return the date menu picker value\r
-     * @param {String} item The field identifier ('before', 'after', 'on')\r
-     * @return {Date} Gets the current selected value of the date field\r
-     */\r
-    getFieldValue : function(item){\r
-        return this.fields[item].menu.picker.getValue();\r
-    },\r
-    \r
-    /**\r
-     * Gets the menu picker associated with the passed field\r
-     * @param {String} item The field identifier ('before', 'after', 'on')\r
-     * @return {Object} The menu picker\r
-     */\r
-    getPicker : function(item){\r
-        return this.fields[item].menu.picker;\r
-    },\r
-\r
-    /**\r
-     * Template method that is to validate the provided Ext.data.Record\r
-     * against the filters configuration.\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 (record) {\r
-        var key,\r
-            pickerValue,\r
-            val = record.get(this.dataIndex);\r
-            \r
-        if(!Ext.isDate(val)){\r
-            return false;\r
-        }\r
-        val = val.clearTime(true).getTime();\r
-        \r
-        for (key in this.fields) {\r
-            if (this.fields[key].checked) {\r
-                pickerValue = this.getFieldValue(key).clearTime(true).getTime();\r
-                if (key == 'before' && pickerValue <= val) {\r
-                    return false;\r
-                }\r
-                if (key == 'after' && pickerValue >= val) {\r
-                    return false;\r
-                }\r
-                if (key == 'on' && pickerValue != val) {\r
-                    return false;\r
-                }\r
-            }\r
-        }\r
-        return true;\r
-    }\r
+/** 
+ * @class Ext.ux.grid.filter.DateFilter
+ * @extends Ext.ux.grid.filter.Filter
+ * Filter by a configurable Ext.menu.DateMenu
+ * <p><b><u>Example Usage:</u></b></p>
+ * <pre><code>    
+var filters = new Ext.ux.grid.GridFilters({
+    ...
+    filters: [{
+        // required configs
+        type: 'date',
+        dataIndex: 'dateAdded',
+        
+        // optional configs
+        dateFormat: 'm/d/Y',  // default
+        beforeText: 'Before', // default
+        afterText: 'After',   // default
+        onText: 'On',         // default
+        pickerOpts: {
+            // any DateMenu configs
+        },
+
+        active: true // default is false
+    }]
+});
+ * </code></pre>
+ */
+Ext.ux.grid.filter.DateFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
+    /**
+     * @cfg {String} afterText
+     * Defaults to 'After'.
+     */
+    afterText : 'After',
+    /**
+     * @cfg {String} beforeText
+     * Defaults to 'Before'.
+     */
+    beforeText : 'Before',
+    /**
+     * @cfg {Object} compareMap
+     * Map for assigning the comparison values used in serialization.
+     */
+    compareMap : {
+        before: 'lt',
+        after:  'gt',
+        on:     'eq'
+    },
+    /**
+     * @cfg {String} dateFormat
+     * The date format to return when using getValue.
+     * Defaults to 'm/d/Y'.
+     */
+    dateFormat : 'm/d/Y',
+
+    /**
+     * @cfg {Date} maxDate
+     * Allowable date as passed to the Ext.DatePicker
+     * Defaults to undefined.
+     */
+    /**
+     * @cfg {Date} minDate
+     * Allowable date as passed to the Ext.DatePicker
+     * Defaults to undefined.
+     */
+    /**
+     * @cfg {Array} menuItems
+     * The items to be shown in this menu
+     * Defaults to:<pre>
+     * menuItems : ['before', 'after', '-', 'on'],
+     * </pre>
+     */
+    menuItems : ['before', 'after', '-', 'on'],
+
+    /**
+     * @cfg {Object} menuItemCfgs
+     * Default configuration options for each menu item
+     */
+    menuItemCfgs : {
+        selectOnFocus: true,
+        width: 125
+    },
+
+    /**
+     * @cfg {String} onText
+     * Defaults to 'On'.
+     */
+    onText : 'On',
+    
+    /**
+     * @cfg {Object} pickerOpts
+     * Configuration options for the date picker associated with each field.
+     */
+    pickerOpts : {},
+
+    /**  
+     * @private
+     * Template method that is to initialize the filter and install required menu items.
+     */
+    init : function (config) {
+        var menuCfg, i, len, item, cfg, Cls;
+
+        menuCfg = Ext.apply(this.pickerOpts, {
+            minDate: this.minDate, 
+            maxDate: this.maxDate, 
+            format:  this.dateFormat,
+            listeners: {
+                scope: this,
+                select: this.onMenuSelect
+            }
+        });
+
+        this.fields = {};
+        for (i = 0, len = this.menuItems.length; i < len; i++) {
+            item = this.menuItems[i];
+            if (item !== '-') {
+                cfg = {
+                    itemId: 'range-' + item,
+                    text: this[item + 'Text'],
+                    menu: new Ext.menu.DateMenu(
+                        Ext.apply(menuCfg, {
+                            itemId: item
+                        })
+                    ),
+                    listeners: {
+                        scope: this,
+                        checkchange: this.onCheckChange
+                    }
+                };
+                Cls = Ext.menu.CheckItem;
+                item = this.fields[item] = new Cls(cfg);
+            }
+            //this.add(item);
+            this.menu.add(item);
+        }
+    },
+
+    onCheckChange : function () {
+        this.setActive(this.isActivatable());
+        this.fireEvent('update', this);
+    },
+
+    /**  
+     * @private
+     * Handler method called when there is a keyup event on an input
+     * item of this menu.
+     */
+    onInputKeyUp : function (field, e) {
+        var k = e.getKey();
+        if (k == e.RETURN && field.isValid()) {
+            e.stopEvent();
+            this.menu.hide(true);
+            return;
+        }
+    },
+
+    /**
+     * Handler for when the menu for a field fires the 'select' event
+     * @param {Object} date
+     * @param {Object} menuItem
+     * @param {Object} value
+     * @param {Object} picker
+     */
+    onMenuSelect : function (menuItem, value, picker) {
+        var fields = this.fields,
+            field = this.fields[menuItem.itemId];
+        
+        field.setChecked(true);
+        
+        if (field == fields.on) {
+            fields.before.setChecked(false, true);
+            fields.after.setChecked(false, true);
+        } else {
+            fields.on.setChecked(false, true);
+            if (field == fields.after && fields.before.menu.picker.value < value) {
+                fields.before.setChecked(false, true);
+            } else if (field == fields.before && fields.after.menu.picker.value > value) {
+                fields.after.setChecked(false, true);
+            }
+        }
+        this.fireEvent('update', this);
+    },
+
+    /**
+     * @private
+     * Template method that is to get and return the value of the filter.
+     * @return {String} The value of this filter
+     */
+    getValue : function () {
+        var key, result = {};
+        for (key in this.fields) {
+            if (this.fields[key].checked) {
+                result[key] = this.fields[key].menu.picker.getValue();
+            }
+        }
+        return result;
+    },
+
+    /**
+     * @private
+     * Template method that is to set the value of the filter.
+     * @param {Object} value The value to set the filter
+     * @param {Boolean} preserve true to preserve the checked status
+     * of the other fields.  Defaults to false, unchecking the
+     * other fields
+     */        
+    setValue : function (value, preserve) {
+        var key;
+        for (key in this.fields) {
+            if(value[key]){
+                this.fields[key].menu.picker.setValue(value[key]);
+                this.fields[key].setChecked(true);
+            } else if (!preserve) {
+                this.fields[key].setChecked(false);
+            }
+        }
+        this.fireEvent('update', this);
+    },
+
+    /**
+     * @private
+     * Template method that is to return <tt>true</tt> if the filter
+     * has enough configuration information to be activated.
+     * @return {Boolean}
+     */
+    isActivatable : function () {
+        var key;
+        for (key in this.fields) {
+            if (this.fields[key].checked) {
+                return true;
+            }
+        }
+        return false;
+    },
+
+    /**
+     * @private
+     * Template method that is to get and return serialized filter data for
+     * transmission to the server.
+     * @return {Object/Array} An object or collection of objects containing
+     * key value pairs representing the current configuration of the filter.
+     */
+    getSerialArgs : function () {
+        var args = [];
+        for (var key in this.fields) {
+            if(this.fields[key].checked){
+                args.push({
+                    type: 'date',
+                    comparison: this.compareMap[key],
+                    value: this.getFieldValue(key).format(this.dateFormat)
+                });
+            }
+        }
+        return args;
+    },
+
+    /**
+     * Get and return the date menu picker value
+     * @param {String} item The field identifier ('before', 'after', 'on')
+     * @return {Date} Gets the current selected value of the date field
+     */
+    getFieldValue : function(item){
+        return this.fields[item].menu.picker.getValue();
+    },
+    
+    /**
+     * Gets the menu picker associated with the passed field
+     * @param {String} item The field identifier ('before', 'after', 'on')
+     * @return {Object} The menu picker
+     */
+    getPicker : function(item){
+        return this.fields[item].menu.picker;
+    },
+
+    /**
+     * Template method that is to validate the provided Ext.data.Record
+     * against the filters configuration.
+     * @param {Ext.data.Record} record The record to validate
+     * @return {Boolean} true if the record is valid within the bounds
+     * of the filter, false otherwise.
+     */
+    validateRecord : function (record) {
+        var key,
+            pickerValue,
+            val = record.get(this.dataIndex);
+            
+        if(!Ext.isDate(val)){
+            return false;
+        }
+        val = val.clearTime(true).getTime();
+        
+        for (key in this.fields) {
+            if (this.fields[key].checked) {
+                pickerValue = this.getFieldValue(key).clearTime(true).getTime();
+                if (key == 'before' && pickerValue <= val) {
+                    return false;
+                }
+                if (key == 'after' && pickerValue >= val) {
+                    return false;
+                }
+                if (key == 'on' && pickerValue != val) {
+                    return false;
+                }
+            }
+        }
+        return true;
+    }
 });
\ No newline at end of file