examples/ux/grid/filter/ListFilter.js

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