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