examples/ux/grid/filter/ListFilter.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 /**
  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.grid.menu.ListMenu} component.</p>
  21  * <p>Although not shown here, this class accepts all configuration options
  22  * for {@link Ext.ux.grid.menu.ListMenu}.</p>
  23  *
  24  * <p><b><u>Example Usage:</u></b></p>
  25  * <pre><code>
  26 var filters = Ext.create('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.define('Ext.ux.grid.filter.ListFilter', {
  40     extend: 'Ext.ux.grid.filter.Filter',
  41     alias: 'gridfilter.list',
  42
  43     /**
  44      * @cfg {Array} options
  45      * <p><code>data</code> to be used to implicitly create a data store
  46      * to back this list when the data source is <b>local</b>. If the
  47      * data for the list is remote, use the <code>{@link #store}</code>
  48      * config instead.</p>
  49      * <br><p>Each item within the provided array may be in one of the
  50      * following formats:</p>
  51      * <div class="mdetail-params"><ul>
  52      * <li><b>Array</b> :
  53      * <pre><code>
  54 options: [
  55     [11, 'extra small'],
  56     [18, 'small'],
  57     [22, 'medium'],
  58     [35, 'large'],
  59     [44, 'extra large']
  60 ]
  61      * </code></pre>
  62      * </li>
  63      * <li><b>Object</b> :
  64      * <pre><code>
  65 labelField: 'name', // override default of 'text'
  66 options: [
  67     {id: 11, name:'extra small'},
  68     {id: 18, name:'small'},
  69     {id: 22, name:'medium'},
  70     {id: 35, name:'large'},
  71     {id: 44, name:'extra large'}
  72 ]
  73      * </code></pre>
  74      * </li>
  75      * <li><b>String</b> :
  76      * <pre><code>
  77      * options: ['extra small', 'small', 'medium', 'large', 'extra large']
  78      * </code></pre>
  79      * </li>
  80      */
  81     /**
  82      * @cfg {Boolean} phpMode
  83      * <p>Adjust the format of this filter. Defaults to false.</p>
  84      * <br><p>When GridFilters <code>@cfg encode = false</code> (default):</p>
  85      * <pre><code>
  86 // phpMode == false (default):
  87 filter[0][data][type] list
  88 filter[0][data][value] value1
  89 filter[0][data][value] value2
  90 filter[0][field] prod
  91
  92 // phpMode == true:
  93 filter[0][data][type] list
  94 filter[0][data][value] value1, value2
  95 filter[0][field] prod
  96      * </code></pre>
  97      * When GridFilters <code>@cfg encode = true</code>:
  98      * <pre><code>
  99 // phpMode == false (default):
 100 filter : [{"type":"list","value":["small","medium"],"field":"size"}]
 101
 102 // phpMode == true:
 103 filter : [{"type":"list","value":"small,medium","field":"size"}]
 104      * </code></pre>
 105      */
 106     phpMode : false,
 107     /**
 108      * @cfg {Ext.data.Store} store
 109      * The {@link Ext.data.Store} this list should use as its data source
 110      * when the data source is <b>remote</b>. If the data for the list
 111      * is local, use the <code>{@link #options}</code> config instead.
 112      */
 113
 114     /**
 115      * @private
 116      * Template method that is to initialize the filter.
 117      * @param {Object} config
 118      */
 119     init : function (config) {
 120         this.dt = Ext.create('Ext.util.DelayedTask', this.fireUpdate, this);
 121     },
 122
 123     /**
 124      * @private @override
 125      * Creates the Menu for this filter.
 126      * @param {Object} config Filter configuration
 127      * @return {Ext.menu.Menu}
 128      */
 129     createMenu: function(config) {
 130         var menu = Ext.create('Ext.ux.grid.menu.ListMenu', config);
 131         menu.on('checkchange', this.onCheckChange, this);
 132         return menu;
 133     },
 134
 135     /**
 136      * @private
 137      * Template method that is to get and return the value of the filter.
 138      * @return {String} The value of this filter
 139      */
 140     getValue : function () {
 141         return this.menu.getSelected();
 142     },
 143     /**
 144      * @private
 145      * Template method that is to set the value of the filter.
 146      * @param {Object} value The value to set the filter
 147      */
 148     setValue : function (value) {
 149         this.menu.setSelected(value);
 150         this.fireEvent('update', this);
 151     },
 152
 153     /**
 154      * @private
 155      * Template method that is to return <tt>true</tt> if the filter
 156      * has enough configuration information to be activated.
 157      * @return {Boolean}
 158      */
 159     isActivatable : function () {
 160         return this.getValue().length > 0;
 161     },
 162
 163     /**
 164      * @private
 165      * Template method that is to get and return serialized filter data for
 166      * transmission to the server.
 167      * @return {Object/Array} An object or collection of objects containing
 168      * key value pairs representing the current configuration of the filter.
 169      */
 170     getSerialArgs : function () {
 171         return {type: 'list', value: this.phpMode ? this.getValue().join(',') : this.getValue()};
 172     },
 173
 174     /** @private */
 175     onCheckChange : function(){
 176         this.dt.delay(this.updateBuffer);
 177     },
 178
 179
 180     /**
 181      * Template method that is to validate the provided Ext.data.Record
 182      * against the filters configuration.
 183      * @param {Ext.data.Record} record The record to validate
 184      * @return {Boolean} true if the record is valid within the bounds
 185      * of the filter, false otherwise.
 186      */
 187     validateRecord : function (record) {
 188         var valuesArray = this.getValue();
 189         return Ext.Array.indexOf(valuesArray, record.get(this.dataIndex)) > -1;
 190     }
 191 });
 192