examples/ux/gridfilters/filter/ListFilter.js

   1 /*!
   2  * Ext JS Library 3.0.3
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /** \r
   8  * @class Ext.ux.grid.filter.ListFilter\r
   9  * @extends Ext.ux.grid.filter.Filter\r
  10  * <p>List filters are able to be preloaded/backed by an Ext.data.Store to load\r
  11  * their options the first time they are shown. ListFilter utilizes the\r
  12  * {@link Ext.ux.menu.ListMenu} component.</p>\r
  13  * <p>Although not shown here, this class accepts all configuration options\r
  14  * for {@link Ext.ux.menu.ListMenu}.</p>\r
  15  * \r
  16  * <p><b><u>Example Usage:</u></b></p>\r
  17  * <pre><code>    \r
  18 var filters = new Ext.ux.grid.GridFilters({\r
  19     ...\r
  20     filters: [{\r
  21         type: 'list',\r
  22         dataIndex: 'size',\r
  23         phpMode: true,\r
  24         // options will be used as data to implicitly creates an ArrayStore\r
  25         options: ['extra small', 'small', 'medium', 'large', 'extra large']\r
  26     }]\r
  27 });\r
  28  * </code></pre>\r
  29  * \r
  30  */\r
  31 Ext.ux.grid.filter.ListFilter = Ext.extend(Ext.ux.grid.filter.Filter, {\r
  32 \r
  33     /**\r
  34      * @cfg {Array} options\r
  35      * <p><code>data</code> to be used to implicitly create a data store\r
  36      * to back this list when the data source is <b>local</b>. If the\r
  37      * data for the list is remote, use the <code>{@link #store}</code>\r
  38      * config instead.</p>\r
  39      * <br><p>Each item within the provided array may be in one of the\r
  40      * following formats:</p>\r
  41      * <div class="mdetail-params"><ul>\r
  42      * <li><b>Array</b> :\r
  43      * <pre><code>\r
  44 options: [\r
  45     [11, 'extra small'], \r
  46     [18, 'small'],\r
  47     [22, 'medium'],\r
  48     [35, 'large'],\r
  49     [44, 'extra large']\r
  50 ]\r
  51      * </code></pre>\r
  52      * </li>\r
  53      * <li><b>Object</b> :\r
  54      * <pre><code>\r
  55 labelField: 'name', // override default of 'text'\r
  56 options: [\r
  57     {id: 11, name:'extra small'}, \r
  58     {id: 18, name:'small'}, \r
  59     {id: 22, name:'medium'}, \r
  60     {id: 35, name:'large'}, \r
  61     {id: 44, name:'extra large'} \r
  62 ]\r
  63      * </code></pre>\r
  64      * </li>\r
  65      * <li><b>String</b> :\r
  66      * <pre><code>\r
  67      * options: ['extra small', 'small', 'medium', 'large', 'extra large']\r
  68      * </code></pre>\r
  69      * </li>\r
  70      */\r
  71     /**\r
  72      * @cfg {Boolean} phpMode\r
  73      * <p>Adjust the format of this filter. Defaults to false.</p>\r
  74      * <br><p>When GridFilters <code>@cfg encode = false</code> (default):</p>\r
  75      * <pre><code>\r
  76 // phpMode == false (default):\r
  77 filter[0][data][type] list\r
  78 filter[0][data][value] value1\r
  79 filter[0][data][value] value2\r
  80 filter[0][field] prod \r
  81 \r
  82 // phpMode == true:\r
  83 filter[0][data][type] list\r
  84 filter[0][data][value] value1, value2\r
  85 filter[0][field] prod \r
  86      * </code></pre>\r
  87      * When GridFilters <code>@cfg encode = true</code>:\r
  88      * <pre><code>\r
  89 // phpMode == false (default):\r
  90 filter : [{"type":"list","value":["small","medium"],"field":"size"}]\r
  91 \r
  92 // phpMode == true:\r
  93 filter : [{"type":"list","value":"small,medium","field":"size"}]\r
  94      * </code></pre>\r
  95      */\r
  96     phpMode : false,\r
  97     /**\r
  98      * @cfg {Ext.data.Store} store\r
  99      * The {@link Ext.data.Store} this list should use as its data source\r
 100      * when the data source is <b>remote</b>. If the data for the list\r
 101      * is local, use the <code>{@link #options}</code> config instead.\r
 102      */\r
 103 \r
 104     /**  \r
 105      * @private\r
 106      * Template method that is to initialize the filter and install required menu items.\r
 107      * @param {Object} config\r
 108      */\r
 109     init : function (config) {\r
 110         this.dt = new Ext.util.DelayedTask(this.fireUpdate, this);\r
 111 \r
 112         // if a menu already existed, do clean up first\r
 113         if (this.menu){\r
 114             this.menu.destroy();\r
 115         }\r
 116         this.menu = new Ext.ux.menu.ListMenu(config);\r
 117         this.menu.on('checkchange', this.onCheckChange, this);\r
 118     },\r
 119     \r
 120     /**\r
 121      * @private\r
 122      * Template method that is to get and return the value of the filter.\r
 123      * @return {String} The value of this filter\r
 124      */\r
 125     getValue : function () {\r
 126         return this.menu.getSelected();\r
 127     },\r
 128     /**\r
 129      * @private\r
 130      * Template method that is to set the value of the filter.\r
 131      * @param {Object} value The value to set the filter\r
 132      */ \r
 133     setValue : function (value) {\r
 134         this.menu.setSelected(value);\r
 135         this.fireEvent('update', this);\r
 136     },\r
 137 \r
 138     /**\r
 139      * @private\r
 140      * Template method that is to return <tt>true</tt> if the filter\r
 141      * has enough configuration information to be activated.\r
 142      * @return {Boolean}\r
 143      */\r
 144     isActivatable : function () {\r
 145         return this.getValue().length > 0;\r
 146     },\r
 147     \r
 148     /**\r
 149      * @private\r
 150      * Template method that is to get and return serialized filter data for\r
 151      * transmission to the server.\r
 152      * @return {Object/Array} An object or collection of objects containing\r
 153      * key value pairs representing the current configuration of the filter.\r
 154      */\r
 155     getSerialArgs : function () {\r
 156         var args = {type: 'list', value: this.phpMode ? this.getValue().join(',') : this.getValue()};\r
 157         return args;\r
 158     },\r
 159 \r
 160     /** @private */\r
 161     onCheckChange : function(){\r
 162         this.dt.delay(this.updateBuffer);\r
 163     },\r
 164     \r
 165     \r
 166     /**\r
 167      * Template method that is to validate the provided Ext.data.Record\r
 168      * against the filters configuration.\r
 169      * @param {Ext.data.Record} record The record to validate\r
 170      * @return {Boolean} true if the record is valid within the bounds\r
 171      * of the filter, false otherwise.\r
 172      */\r
 173     validateRecord : function (record) {\r
 174         return this.getValue().indexOf(record.get(this.dataIndex)) > -1;\r
 175     }\r
 176 });