Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / docs / source / DateMenu.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 <div id="cls-Ext.menu.DateMenu"></div>/**
16  * @class Ext.menu.DateMenu
17  * @extends Ext.menu.Menu
18  * <p>A menu containing an {@link Ext.DatePicker} Component.</p>
19  * <p>Notes:</p><div class="mdetail-params"><ul>
20  * <li>Although not listed here, the <b>constructor</b> for this class
21  * accepts all of the configuration options of <b>{@link Ext.DatePicker}</b>.</li>
22  * <li>If subclassing DateMenu, any configuration options for the DatePicker must be
23  * applied to the <tt><b>initialConfig</b></tt> property of the DateMenu.
24  * Applying {@link Ext.DatePicker DatePicker} configuration settings to
25  * <b><tt>this</tt></b> will <b>not</b> affect the DatePicker's configuration.</li>
26  * </ul></div>
27  * @xtype datemenu
28  */
29  Ext.menu.DateMenu = Ext.extend(Ext.menu.Menu, {
30     <div id="cfg-Ext.menu.DateMenu-enableScrolling"></div>/** 
31      * @cfg {Boolean} enableScrolling
32      * @hide 
33      */
34     enableScrolling : false,
35     <div id="cfg-Ext.menu.DateMenu-handler"></div>/**
36      * @cfg {Function} handler
37      * Optional. A function that will handle the select event of this menu.
38      * The handler is passed the following parameters:<div class="mdetail-params"><ul>
39      * <li><code>picker</code> : DatePicker<div class="sub-desc">The Ext.DatePicker.</div></li>
40      * <li><code>date</code> : Date<div class="sub-desc">The selected date.</div></li>
41      * </ul></div>
42      */
43     <div id="cfg-Ext.menu.DateMenu-scope"></div>/**
44      * @cfg {Object} scope
45      * The scope (<tt><b>this</b></tt> reference) in which the <code>{@link #handler}</code>
46      * function will be called.  Defaults to this DateMenu instance.
47      */    
48     <div id="cfg-Ext.menu.DateMenu-hideOnClick"></div>/** 
49      * @cfg {Boolean} hideOnClick
50      * False to continue showing the menu after a date is selected, defaults to true.
51      */
52     hideOnClick : true,
53     
54     <div id="cfg-Ext.menu.DateMenu-pickerId"></div>/** 
55      * @cfg {String} pickerId
56      * An id to assign to the underlying date picker. Defaults to <tt>null</tt>.
57      */
58     pickerId : null,
59     
60     <div id="cfg-Ext.menu.DateMenu-maxHeight"></div>/** 
61      * @cfg {Number} maxHeight
62      * @hide 
63      */
64     <div id="cfg-Ext.menu.DateMenu-scrollIncrement"></div>/** 
65      * @cfg {Number} scrollIncrement
66      * @hide 
67      */
68     <div id="prop-Ext.menu.DateMenu-picker"></div>/**
69      * The {@link Ext.DatePicker} instance for this DateMenu
70      * @property picker
71      * @type DatePicker
72      */
73     cls : 'x-date-menu',
74     
75     <div id="event-Ext.menu.DateMenu-click"></div>/**
76      * @event click
77      * @hide
78      */
79     
80     <div id="event-Ext.menu.DateMenu-itemclick"></div>/**
81      * @event itemclick
82      * @hide
83      */
84
85     initComponent : function(){
86         this.on('beforeshow', this.onBeforeShow, this);
87         if(this.strict = (Ext.isIE7 && Ext.isStrict)){
88             this.on('show', this.onShow, this, {single: true, delay: 20});
89         }
90         Ext.apply(this, {
91             plain: true,
92             showSeparator: false,
93             items: this.picker = new Ext.DatePicker(Ext.applyIf({
94                 internalRender: this.strict || !Ext.isIE,
95                 ctCls: 'x-menu-date-item',
96                 id: this.pickerId
97             }, this.initialConfig))
98         });
99         this.picker.purgeListeners();
100         Ext.menu.DateMenu.superclass.initComponent.call(this);
101         <div id="event-Ext.menu.DateMenu-select"></div>/**
102          * @event select
103          * Fires when a date is selected from the {@link #picker Ext.DatePicker}
104          * @param {DatePicker} picker The {@link #picker Ext.DatePicker}
105          * @param {Date} date The selected date
106          */
107         this.relayEvents(this.picker, ['select']);
108         this.on('show', this.picker.focus, this.picker);
109         this.on('select', this.menuHide, this);
110         if(this.handler){
111             this.on('select', this.handler, this.scope || this);
112         }
113     },
114
115     menuHide : function() {
116         if(this.hideOnClick){
117             this.hide(true);
118         }
119     },
120
121     onBeforeShow : function(){
122         if(this.picker){
123             this.picker.hideMonthPicker(true);
124         }
125     },
126
127     onShow : function(){
128         var el = this.picker.getEl();
129         el.setWidth(el.getWidth()); //nasty hack for IE7 strict mode
130     }
131  });
132  Ext.reg('datemenu', Ext.menu.DateMenu);
133  </pre>    
134 </body>
135 </html>