docs/source/ListFilter.html

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