DatePicker.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-menu-DatePicker'>/**
  19. </span> * A menu containing an Ext.picker.Date Component.
  20. *
  21. * Notes:
  22. *
  23. * - Although not listed here, the **constructor** for this class accepts all of the
  24. * configuration options of **{@link Ext.picker.Date}**.
  25. * - If subclassing DateMenu, any configuration options for the DatePicker must be applied
  26. * to the **initialConfig** property of the DateMenu. Applying {@link Ext.picker.Date Date Picker}
  27. * configuration settings to **this** will **not** affect the Date Picker's configuration.
  28. *
  29. * Example:
  30. *
  31. * @example
  32. * var dateMenu = Ext.create('Ext.menu.DatePicker', {
  33. * handler: function(dp, date){
  34. * Ext.Msg.alert('Date Selected', 'You selected ' + Ext.Date.format(date, 'M j, Y'));
  35. * }
  36. * });
  37. *
  38. * Ext.create('Ext.menu.Menu', {
  39. * width: 100,
  40. * height: 90,
  41. * floating: false, // usually you want this set to True (default)
  42. * renderTo: Ext.getBody(), // usually rendered by it's containing component
  43. * items: [{
  44. * text: 'choose a date',
  45. * menu: dateMenu
  46. * },{
  47. * iconCls: 'add16',
  48. * text: 'icon item'
  49. * },{
  50. * text: 'regular item'
  51. * }]
  52. * });
  53. */
  54. Ext.define('Ext.menu.DatePicker', {
  55. extend: 'Ext.menu.Menu',
  56. alias: 'widget.datemenu',
  57. requires: [
  58. 'Ext.picker.Date'
  59. ],
  60. <span id='Ext-menu-DatePicker-cfg-hideOnClick'> /**
  61. </span> * @cfg {Boolean} hideOnClick
  62. * False to continue showing the menu after a date is selected.
  63. */
  64. hideOnClick : true,
  65. <span id='Ext-menu-DatePicker-cfg-pickerId'> /**
  66. </span> * @cfg {String} pickerId
  67. * An id to assign to the underlying date picker.
  68. */
  69. pickerId : null,
  70. <span id='Ext-menu-DatePicker-cfg-maxHeight'> /**
  71. </span> * @cfg {Number} maxHeight
  72. * @private
  73. */
  74. <span id='Ext-menu-DatePicker-property-picker'> /**
  75. </span> * @property {Ext.picker.Date} picker
  76. * The {@link Ext.picker.Date} instance for this DateMenu
  77. */
  78. initComponent : function(){
  79. var me = this,
  80. cfg = Ext.apply({}, me.initialConfig);
  81. // Ensure we clear any listeners so they aren't duplicated
  82. delete cfg.listeners;
  83. Ext.apply(me, {
  84. showSeparator: false,
  85. plain: true,
  86. border: false,
  87. bodyPadding: 0, // remove the body padding from the datepicker menu item so it looks like 3.3
  88. items: Ext.applyIf({
  89. cls: Ext.baseCSSPrefix + 'menu-date-item',
  90. id: me.pickerId,
  91. xtype: 'datepicker'
  92. }, cfg)
  93. });
  94. me.callParent(arguments);
  95. me.picker = me.down('datepicker');
  96. <span id='Ext-menu-DatePicker-event-select'> /**
  97. </span> * @event select
  98. * @inheritdoc Ext.picker.Date#select
  99. */
  100. me.relayEvents(me.picker, ['select']);
  101. if (me.hideOnClick) {
  102. me.on('select', me.hidePickerOnSelect, me);
  103. }
  104. },
  105. hidePickerOnSelect: function() {
  106. Ext.menu.Manager.hideAll();
  107. }
  108. });</pre>
  109. </body>
  110. </html>