Upgrade to ExtJS 3.0.3 - Released 10/11/2009
[extjs.git] / examples / ux / gridfilters / filter / NumericFilter.js
diff --git a/examples/ux/gridfilters/filter/NumericFilter.js b/examples/ux/gridfilters/filter/NumericFilter.js
new file mode 100644 (file)
index 0000000..3dcc631
--- /dev/null
@@ -0,0 +1,202 @@
+/*!
+ * Ext JS Library 3.0.3
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+/** \r
+ * @class Ext.ux.grid.filter.NumericFilter\r
+ * @extends Ext.ux.grid.filter.Filter\r
+ * Filters using an Ext.ux.menu.RangeMenu.\r
+ * <p><b><u>Example Usage:</u></b></p>\r
+ * <pre><code>    \r
+var filters = new Ext.ux.grid.GridFilters({\r
+    ...\r
+    filters: [{\r
+        type: 'numeric',\r
+        dataIndex: 'price'\r
+    }]\r
+});\r
+ * </code></pre> \r
+ */\r
+Ext.ux.grid.filter.NumericFilter = Ext.extend(Ext.ux.grid.filter.Filter, {\r
+\r
+    /**\r
+     * @cfg {Object} fieldCls\r
+     * The Class to use to construct each field item within this menu\r
+     * Defaults to:<pre>\r
+     * fieldCls : Ext.form.NumberField\r
+     * </pre>\r
+     */\r
+    fieldCls : Ext.form.NumberField,\r
+    /**\r
+     * @cfg {Object} fieldCfg\r
+     * The default configuration options for any field item unless superseded\r
+     * by the <code>{@link #fields}</code> configuration.\r
+     * Defaults to:<pre>\r
+     * fieldCfg : {}\r
+     * </pre>\r
+     * Example usage:\r
+     * <pre><code>\r
+fieldCfg : {\r
+    width: 150,\r
+},\r
+     * </code></pre>\r
+     */\r
+    /**\r
+     * @cfg {Object} fields\r
+     * The field items may be configured individually\r
+     * Defaults to <tt>undefined</tt>.\r
+     * Example usage:\r
+     * <pre><code>\r
+fields : {\r
+    gt: { // override fieldCfg options\r
+        width: 200,\r
+        fieldCls: Ext.ux.form.CustomNumberField // to override default {@link #fieldCls}\r
+    }\r
+},\r
+     * </code></pre>\r
+     */\r
+    /**\r
+     * @cfg {Object} iconCls\r
+     * The iconCls to be applied to each comparator field item.\r
+     * Defaults to:<pre>\r
+iconCls : {\r
+    gt : 'ux-rangemenu-gt',\r
+    lt : 'ux-rangemenu-lt',\r
+    eq : 'ux-rangemenu-eq'\r
+}\r
+     * </pre>\r
+     */\r
+    iconCls : {\r
+        gt : 'ux-rangemenu-gt',\r
+        lt : 'ux-rangemenu-lt',\r
+        eq : 'ux-rangemenu-eq'\r
+    },\r
+\r
+    /**\r
+     * @cfg {Object} menuItemCfgs\r
+     * Default configuration options for each menu item\r
+     * Defaults to:<pre>\r
+menuItemCfgs : {\r
+    emptyText: 'Enter Filter Text...',\r
+    selectOnFocus: true,\r
+    width: 125\r
+}\r
+     * </pre>\r
+     */\r
+    menuItemCfgs : {\r
+        emptyText: 'Enter Filter Text...',\r
+        selectOnFocus: true,\r
+        width: 125\r
+    },\r
+\r
+    /**\r
+     * @cfg {Array} menuItems\r
+     * The items to be shown in this menu.  Items are added to the menu\r
+     * according to their position within this array. Defaults to:<pre>\r
+     * menuItems : ['lt','gt','-','eq']\r
+     * </pre>\r
+     */\r
+    menuItems : ['lt', 'gt', '-', 'eq'],\r
+\r
+    /**  \r
+     * @private\r
+     * Template method that is to initialize the filter and install required menu items.\r
+     */\r
+    init : function (config) {\r
+        // if a menu already existed, do clean up first\r
+        if (this.menu){\r
+            this.menu.destroy();\r
+        }        \r
+        this.menu = new Ext.ux.menu.RangeMenu(Ext.apply(config, {\r
+            // pass along filter configs to the menu\r
+            fieldCfg : this.fieldCfg || {},\r
+            fieldCls : this.fieldCls,\r
+            fields : this.fields || {},\r
+            iconCls: this.iconCls,\r
+            menuItemCfgs: this.menuItemCfgs,\r
+            menuItems: this.menuItems,\r
+            updateBuffer: this.updateBuffer\r
+        }));\r
+        // relay the event fired by the menu\r
+        this.menu.on('update', this.fireUpdate, 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
+        return this.menu.getValue();\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
+     */        \r
+    setValue : function (value) {\r
+        this.menu.setValue(value);\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 values = this.getValue();\r
+        for (key in values) {\r
+            if (values[key] !== undefined) {\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 key,\r
+            args = [],\r
+            values = this.menu.getValue();\r
+        for (key in values) {\r
+            args.push({\r
+                type: 'numeric',\r
+                comparison: key,\r
+                value: values[key]\r
+            });\r
+        }\r
+        return args;\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 val = record.get(this.dataIndex),\r
+            values = this.getValue();\r
+        if (values.eq !== undefined && val != values.eq) {\r
+            return false;\r
+        }\r
+        if (values.lt !== undefined && val >= values.lt) {\r
+            return false;\r
+        }\r
+        if (values.gt !== undefined && val <= values.gt) {\r
+            return false;\r
+        }\r
+        return true;\r
+    }\r
+});
\ No newline at end of file