/ext-4.0.7/examples/ux/grid/filter/ListFilter.js

  1/*
  2
  3This file is part of Ext JS 4
  4
  5Copyright (c) 2011 Sencha Inc
  6
  7Contact:  http://www.sencha.com/contact
  8
  9GNU General Public License Usage
 10This 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
 12If 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>
 26var 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 */
 39Ext.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>
 54options: [
 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>
 65labelField: 'name', // override default of 'text'
 66options: [
 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):
 87filter[0][data][type] list
 88filter[0][data][value] value1
 89filter[0][data][value] value2
 90filter[0][field] prod
 91
 92// phpMode == true:
 93filter[0][data][type] list
 94filter[0][data][value] value1, value2
 95filter[0][field] prod
 96     * </code></pre>
 97     * When GridFilters <code>@cfg encode = true</code>:
 98     * <pre><code>
 99// phpMode == false (default):
100filter : [{"type":"list","value":["small","medium"],"field":"size"}]
101
102// phpMode == true:
103filter : [{"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