docs/source/Time.html

   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="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../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-picker-Time'>/**
  19 </span> * @class Ext.picker.Time
  20  * @extends Ext.view.BoundList
  21  * &lt;p&gt;A time picker which provides a list of times from which to choose. This is used by the
  22  * {@link Ext.form.field.Time} class to allow browsing and selection of valid times, but could also be used
  23  * with other components.&lt;/p&gt;
  24  * &lt;p&gt;By default, all times starting at midnight and incrementing every 15 minutes will be presented.
  25  * This list of available times can be controlled using the {@link #minValue}, {@link #maxValue}, and
  26  * {@link #increment} configuration properties. The format of the times presented in the list can be
  27  * customized with the {@link #format} config.&lt;/p&gt;
  28  * &lt;p&gt;To handle when the user selects a time from the list, you can subscribe to the {@link #selectionchange}
  29  * event.&lt;/p&gt;
  30  *
  31  * {@img Ext.picker.Time/Ext.picker.Time.png Ext.picker.Time component}
  32  *
  33  * ## Code
  34      new Ext.create('Ext.picker.Time', {
  35         width: 60,
  36         minValue: Ext.Date.parse('04:30:00 AM', 'h:i:s A'),
  37         maxValue: Ext.Date.parse('08:00:00 AM', 'h:i:s A'),
  38         renderTo: Ext.getBody()
  39     });
  40  *
  41  */
  42 Ext.define('Ext.picker.Time', {
  43     extend: 'Ext.view.BoundList',
  44     alias: 'widget.timepicker',
  45     requires: ['Ext.data.Store', 'Ext.Date'],
  46
  47 <span id='Ext-picker-Time-cfg-minValue'>    /**
  48 </span>     * @cfg {Date} minValue
  49      * The minimum time to be shown in the list of times. This must be a Date object (only the time fields
  50      * will be used); no parsing of String values will be done. Defaults to undefined.
  51      */
  52
  53 <span id='Ext-picker-Time-cfg-maxValue'>    /**
  54 </span>     * @cfg {Date} maxValue
  55      * The maximum time to be shown in the list of times. This must be a Date object (only the time fields
  56      * will be used); no parsing of String values will be done. Defaults to undefined.
  57      */
  58
  59 <span id='Ext-picker-Time-cfg-increment'>    /**
  60 </span>     * @cfg {Number} increment
  61      * The number of minutes between each time value in the list (defaults to 15).
  62      */
  63     increment: 15,
  64
  65 <span id='Ext-picker-Time-cfg-format'>    /**
  66 </span>     * @cfg {String} format
  67      * The default time format string which can be overriden for localization support. The format must be
  68      * valid according to {@link Ext.Date#parse} (defaults to 'g:i A', e.g., '3:15 PM'). For 24-hour time
  69      * format try 'H:i' instead.
  70      */
  71     format : &quot;g:i A&quot;,
  72
  73 <span id='Ext-picker-Time-property-displayField'>    /**
  74 </span>     * @hide
  75      * The field in the implicitly-generated Model objects that gets displayed in the list. This is
  76      * an internal field name only and is not useful to change via config.
  77      */
  78     displayField: 'disp',
  79
  80 <span id='Ext-picker-Time-property-initDate'>    /**
  81 </span>     * @private
  82      * Year, month, and day that all times will be normalized into internally.
  83      */
  84     initDate: [2008,1,1],
  85
  86     componentCls: Ext.baseCSSPrefix + 'timepicker',
  87
  88 <span id='Ext-picker-Time-property-loadMask'>    /**
  89 </span>     * @hide
  90      */
  91     loadMask: false,
  92
  93     initComponent: function() {
  94         var me = this,
  95             dateUtil = Ext.Date,
  96             clearTime = dateUtil.clearTime,
  97             initDate = me.initDate.join('/');
  98
  99         // Set up absolute min and max for the entire day
 100         me.absMin = clearTime(new Date(initDate));
 101         me.absMax = dateUtil.add(clearTime(new Date(initDate)), 'mi', (24 * 60) - 1);
 102
 103         me.store = me.createStore();
 104         me.updateList();
 105
 106         this.callParent();
 107     },
 108
 109 <span id='Ext-picker-Time-method-setMinValue'>    /**
 110 </span>     * Set the {@link #minValue} and update the list of available times. This must be a Date
 111      * object (only the time fields will be used); no parsing of String values will be done.
 112      * @param {Date} value
 113      */
 114     setMinValue: function(value) {
 115         this.minValue = value;
 116         this.updateList();
 117     },
 118
 119 <span id='Ext-picker-Time-method-setMaxValue'>    /**
 120 </span>     * Set the {@link #maxValue} and update the list of available times. This must be a Date
 121      * object (only the time fields will be used); no parsing of String values will be done.
 122      * @param {Date} value
 123      */
 124     setMaxValue: function(value) {
 125         this.maxValue = value;
 126         this.updateList();
 127     },
 128
 129 <span id='Ext-picker-Time-method-normalizeDate'>    /**
 130 </span>     * @private
 131      * Sets the year/month/day of the given Date object to the {@link #initDate}, so that only
 132      * the time fields are significant. This makes values suitable for time comparison.
 133      * @param {Date} date
 134      */
 135     normalizeDate: function(date) {
 136         var initDate = this.initDate;
 137         date.setFullYear(initDate[0], initDate[1] - 1, initDate[2]);
 138         return date;
 139     },
 140
 141 <span id='Ext-picker-Time-method-updateList'>    /**
 142 </span>     * Update the list of available times in the list to be constrained within the
 143      * {@link #minValue} and {@link #maxValue}.
 144      */
 145     updateList: function() {
 146         var me = this,
 147             min = me.normalizeDate(me.minValue || me.absMin),
 148             max = me.normalizeDate(me.maxValue || me.absMax);
 149
 150         me.store.filterBy(function(record) {
 151             var date = record.get('date');
 152             return date &gt;= min &amp;&amp; date &lt;= max;
 153         });
 154     },
 155
 156 <span id='Ext-picker-Time-method-createStore'>    /**
 157 </span>     * @private
 158      * Creates the internal {@link Ext.data.Store} that contains the available times. The store
 159      * is loaded with all possible times, and it is later filtered to hide those times outside
 160      * the minValue/maxValue.
 161      */
 162     createStore: function() {
 163         var me = this,
 164             utilDate = Ext.Date,
 165             times = [],
 166             min = me.absMin,
 167             max = me.absMax;
 168
 169         while(min &lt;= max){
 170             times.push({
 171                 disp: utilDate.dateFormat(min, me.format),
 172                 date: min
 173             });
 174             min = utilDate.add(min, 'mi', me.increment);
 175         }
 176
 177         return Ext.create('Ext.data.Store', {
 178             fields: ['disp', 'date'],
 179             data: times
 180         });
 181     }
 182
 183 });
 184 </pre>
 185 </body>
 186 </html>