examples/docs/source/ListFilter.html

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