examples/ux/gridfilters/filter/ListFilter.js

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