docs/source/DateMenu.html

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