3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
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.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
16 * @class Ext.ux.grid.menu.RangeMenu
17 * @extends Ext.menu.Menu
18 * Custom implementation of {@link Ext.menu.Menu} that has preconfigured items for entering numeric
19 * range comparison values: less-than, greater-than, and equal-to. This is used internally
20 * by {@link Ext.ux.grid.filter.NumericFilter} to create its menu.
22 Ext.define('Ext.ux.grid.menu.RangeMenu', {
23 extend: 'Ext.menu.Menu',
26 * @cfg {String} fieldCls
27 * The Class to use to construct each field item within this menu
29 * fieldCls : Ext.form.field.Number
32 fieldCls : 'Ext.form.field.Number',
35 * @cfg {Object} fieldCfg
36 * The default configuration options for any field item unless superseded
37 * by the <code>{@link #fields}</code> configuration.
50 * @cfg {Object} fields
51 * The field items may be configured individually
52 * Defaults to <tt>undefined</tt>.
56 gt: { // override fieldCfg options
58 fieldCls: Ext.ux.form.CustomNumberField // to override default {@link #fieldCls}
65 * @cfg {Object} iconCls
66 * The iconCls to be applied to each comparator field item.
69 gt : 'ux-rangemenu-gt',
70 lt : 'ux-rangemenu-lt',
71 eq : 'ux-rangemenu-eq'
76 gt : 'ux-rangemenu-gt',
77 lt : 'ux-rangemenu-lt',
78 eq : 'ux-rangemenu-eq'
82 * @cfg {Object} fieldLabels
83 * Accessible label text for each comparator field item. Can be overridden by localization
84 * files. Defaults to:<pre>
98 * @cfg {Object} menuItemCfgs
99 * Default configuration options for each menu item
102 emptyText: 'Enter Filter Text...',
109 emptyText: 'Enter Number...',
110 selectOnFocus: false,
115 * @cfg {Array} menuItems
116 * The items to be shown in this menu. Items are added to the menu
117 * according to their position within this array. Defaults to:<pre>
118 * menuItems : ['lt','gt','-','eq']
121 menuItems : ['lt', 'gt', '-', 'eq'],
124 constructor : function (config) {
126 fields, fieldCfg, i, len, item, cfg, Cls;
128 me.callParent(arguments);
130 fields = me.fields = me.fields || {};
131 fieldCfg = me.fieldCfg = me.fieldCfg || {};
136 * Fires when a filter configuration has changed
137 * @param {Ext.ux.grid.filter.Filter} this The filter object.
142 me.updateTask = Ext.create('Ext.util.DelayedTask', me.fireUpdate, me);
144 for (i = 0, len = me.menuItems.length; i < len; i++) {
145 item = me.menuItems[i];
149 itemId: 'range-' + item,
150 enableKeyEvents: true,
152 fieldLabel: me.iconTpl.apply({
153 cls: me.iconCls[item] || 'no-icon',
154 text: me.fieldLabels[item] || '',
155 src: Ext.BLANK_IMAGE_URL
161 change: me.onInputChange,
162 keyup: me.onInputKeyUp,
169 activate: Ext.emptyFn,
170 deactivate: Ext.emptyFn
175 Ext.applyIf(fields[item] || {}, fieldCfg[item]),
176 // configurable defaults
179 Cls = cfg.fieldCls || me.fieldCls;
180 item = fields[item] = Ext.create(Cls, cfg);
188 * called by this.updateTask
190 fireUpdate : function () {
191 this.fireEvent('update', this);
195 * Get and return the value of the filter.
196 * @return {String} The value of this filter
198 getValue : function () {
199 var result = {}, key, field;
200 for (key in this.fields) {
201 field = this.fields[key];
202 if (field.isValid() && field.getValue() !== null) {
203 result[key] = field.getValue();
210 * Set the value of this menu and fires the 'update' event.
211 * @param {Object} data The data to assign to this menu
213 setValue : function (data) {
215 for (key in this.fields) {
216 this.fields[key].setValue(key in data ? data[key] : '');
218 this.fireEvent('update', this);
223 * Handler method called when there is a keyup event on an input
226 onInputKeyUp: function(field, e) {
227 if (e.getKey() === e.RETURN && field.isValid()) {
235 * Handler method called when the user changes the value of one of the input
236 * items in this menu.
238 onInputChange: function(field) {
258 this.updateTask.delay(this.updateBuffer);
263 * @cfg {Ext.XTemplate} iconTpl
264 * A template for generating the label for each field in the menu
266 this.prototype.iconTpl = Ext.create('Ext.XTemplate',
267 '<img src="{src}" alt="{text}" class="' + Ext.baseCSSPrefix + 'menu-item-icon ux-rangemenu-icon {cls}" />'