Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / examples / docs / source / RangeMenu.html
1 <html>
2 <head>
3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
4   <title>The source code</title>
5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
7 </head>
8 <body  onload="prettyPrint();">
9     <pre class="prettyprint lang-js">/*!
10  * Ext JS Library 3.3.1
11  * Copyright(c) 2006-2010 Sencha Inc.
12  * licensing@sencha.com
13  * http://www.sencha.com/license
14  */
15 Ext.ns('Ext.ux.menu');
16
17 <div id="cls-Ext.ux.menu.RangeMenu"></div>/** 
18  * @class Ext.ux.menu.RangeMenu
19  * @extends Ext.menu.Menu
20  * Custom implementation of Ext.menu.Menu that has preconfigured
21  * items for gt, lt, eq.
22  * <p><b><u>Example Usage:</u></b></p>
23  * <pre><code>    
24
25  * </code></pre> 
26  */
27 Ext.ux.menu.RangeMenu = Ext.extend(Ext.menu.Menu, {
28
29     constructor : function (config) {
30
31         Ext.ux.menu.RangeMenu.superclass.constructor.call(this, config);
32
33         this.addEvents(
34             <div id="event-Ext.ux.menu.RangeMenu-update"></div>/**
35              * @event update
36              * Fires when a filter configuration has changed
37              * @param {Ext.ux.grid.filter.Filter} this The filter object.
38              */
39             'update'
40         );
41       
42         this.updateTask = new Ext.util.DelayedTask(this.fireUpdate, this);
43     
44         var i, len, item, cfg, Cls;
45
46         for (i = 0, len = this.menuItems.length; i < len; i++) {
47             item = this.menuItems[i];
48             if (item !== '-') {
49                 // defaults
50                 cfg = {
51                     itemId: 'range-' + item,
52                     enableKeyEvents: true,
53                     iconCls: this.iconCls[item] || 'no-icon',
54                     listeners: {
55                         scope: this,
56                         keyup: this.onInputKeyUp
57                     }
58                 };
59                 Ext.apply(
60                     cfg,
61                     // custom configs
62                     Ext.applyIf(this.fields[item] || {}, this.fieldCfg[item]),
63                     // configurable defaults
64                     this.menuItemCfgs
65                 );
66                 Cls = cfg.fieldCls || this.fieldCls;
67                 item = this.fields[item] = new Cls(cfg);
68             }
69             this.add(item);
70         }
71     },
72
73     /**
74      * @private
75      * called by this.updateTask
76      */
77     fireUpdate : function () {
78         this.fireEvent('update', this);
79     },
80     
81     <div id="method-Ext.ux.menu.RangeMenu-getValue"></div>/**
82      * Get and return the value of the filter.
83      * @return {String} The value of this filter
84      */
85     getValue : function () {
86         var result = {}, key, field;
87         for (key in this.fields) {
88             field = this.fields[key];
89             if (field.isValid() && String(field.getValue()).length > 0) {
90                 result[key] = field.getValue();
91             }
92         }
93         return result;
94     },
95   
96     <div id="method-Ext.ux.menu.RangeMenu-setValue"></div>/**
97      * Set the value of this menu and fires the 'update' event.
98      * @param {Object} data The data to assign to this menu
99      */ 
100     setValue : function (data) {
101         var key;
102         for (key in this.fields) {
103             this.fields[key].setValue(data[key] !== undefined ? data[key] : '');
104         }
105         this.fireEvent('update', this);
106     },
107
108     /**  
109      * @private
110      * Handler method called when there is a keyup event on an input
111      * item of this menu.
112      */
113     onInputKeyUp : function (field, e) {
114         var k = e.getKey();
115         if (k == e.RETURN && field.isValid()) {
116             e.stopEvent();
117             this.hide(true);
118             return;
119         }
120         
121         if (field == this.fields.eq) {
122             if (this.fields.gt) {
123                 this.fields.gt.setValue(null);
124             }
125             if (this.fields.lt) {
126                 this.fields.lt.setValue(null);
127             }
128         }
129         else {
130             this.fields.eq.setValue(null);
131         }
132         
133         // restart the timer
134         this.updateTask.delay(this.updateBuffer);
135     }
136 });
137 </pre>    
138 </body>
139 </html>