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="../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-method-constructor'><span id='Ext-picker-Time'>/**
  19 </span></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  * @constructor
  42  * Create a new TimePicker
  43  * @param {Object} config The config object
  44  *
  45  * @xtype timepicker
  46  */
  47 Ext.define('Ext.picker.Time', {
  48     extend: 'Ext.view.BoundList',
  49     alias: 'widget.timepicker',
  50     requires: ['Ext.data.Store', 'Ext.Date'],
  51
  52 <span id='Ext-picker-Time-cfg-minValue'>    /**
  53 </span>     * @cfg {Date} minValue
  54      * The minimum time to be shown in the list of times. This must be a Date object (only the time fields
  55      * will be used); no parsing of String values will be done. Defaults to undefined.
  56      */
  57
  58 <span id='Ext-picker-Time-cfg-maxValue'>    /**
  59 </span>     * @cfg {Date} maxValue
  60      * The maximum time to be shown in the list of times. This must be a Date object (only the time fields
  61      * will be used); no parsing of String values will be done. Defaults to undefined.
  62      */
  63
  64 <span id='Ext-picker-Time-cfg-increment'>    /**
  65 </span>     * @cfg {Number} increment
  66      * The number of minutes between each time value in the list (defaults to 15).
  67      */
  68     increment: 15,
  69
  70 <span id='Ext-picker-Time-cfg-format'>    /**
  71 </span>     * @cfg {String} format
  72      * The default time format string which can be overriden for localization support. The format must be
  73      * valid according to {@link Ext.Date#parse} (defaults to 'g:i A', e.g., '3:15 PM'). For 24-hour time
  74      * format try 'H:i' instead.
  75      */
  76     format : &quot;g:i A&quot;,
  77
  78 <span id='Ext-picker-Time-property-displayField'>    /**
  79 </span>     * @hide
  80      * The field in the implicitly-generated Model objects that gets displayed in the list. This is
  81      * an internal field name only and is not useful to change via config.
  82      */
  83     displayField: 'disp',
  84
  85 <span id='Ext-picker-Time-property-initDate'>    /**
  86 </span>     * @private
  87      * Year, month, and day that all times will be normalized into internally.
  88      */
  89     initDate: [2008,1,1],
  90
  91     componentCls: Ext.baseCSSPrefix + 'timepicker',
  92
  93 <span id='Ext-picker-Time-property-loadingText'>    /**
  94 </span>     * @hide
  95      */
  96     loadingText: '',
  97
  98     initComponent: function() {
  99         var me = this,
 100             dateUtil = Ext.Date,
 101             clearTime = dateUtil.clearTime,
 102             initDate = me.initDate.join('/');
 103
 104         // Set up absolute min and max for the entire day
 105         me.absMin = clearTime(new Date(initDate));
 106         me.absMax = dateUtil.add(clearTime(new Date(initDate)), 'mi', (24 * 60) - 1);
 107
 108         me.store = me.createStore();
 109         me.updateList();
 110
 111         this.callParent();
 112     },
 113
 114 <span id='Ext-picker-Time-method-setMinValue'>    /**
 115 </span>     * Set the {@link #minValue} and update the list of available times. This must be a Date
 116      * object (only the time fields will be used); no parsing of String values will be done.
 117      * @param {Date} value
 118      */
 119     setMinValue: function(value) {
 120         this.minValue = value;
 121         this.updateList();
 122     },
 123
 124 <span id='Ext-picker-Time-method-setMaxValue'>    /**
 125 </span>     * Set the {@link #maxValue} and update the list of available times. This must be a Date
 126      * object (only the time fields will be used); no parsing of String values will be done.
 127      * @param {Date} value
 128      */
 129     setMaxValue: function(value) {
 130         this.maxValue = value;
 131         this.updateList();
 132     },
 133
 134 <span id='Ext-picker-Time-method-normalizeDate'>    /**
 135 </span>     * @private
 136      * Sets the year/month/day of the given Date object to the {@link #initDate}, so that only
 137      * the time fields are significant. This makes values suitable for time comparison.
 138      * @param {Date} date
 139      */
 140     normalizeDate: function(date) {
 141         var initDate = this.initDate;
 142         date.setFullYear(initDate[0], initDate[1] - 1, initDate[2]);
 143         return date;
 144     },
 145
 146 <span id='Ext-picker-Time-method-updateList'>    /**
 147 </span>     * Update the list of available times in the list to be constrained within the
 148      * {@link #minValue} and {@link #maxValue}.
 149      */
 150     updateList: function() {
 151         var me = this,
 152             min = me.normalizeDate(me.minValue || me.absMin),
 153             max = me.normalizeDate(me.maxValue || me.absMax);
 154
 155         me.store.filterBy(function(record) {
 156             var date = record.get('date');
 157             return date &gt;= min &amp;&amp; date &lt;= max;
 158         });
 159     },
 160
 161 <span id='Ext-picker-Time-method-createStore'>    /**
 162 </span>     * @private
 163      * Creates the internal {@link Ext.data.Store} that contains the available times. The store
 164      * is loaded with all possible times, and it is later filtered to hide those times outside
 165      * the minValue/maxValue.
 166      */
 167     createStore: function() {
 168         var me = this,
 169             utilDate = Ext.Date,
 170             times = [],
 171             min = me.absMin,
 172             max = me.absMax;
 173
 174         while(min &lt;= max){
 175             times.push({
 176                 disp: utilDate.dateFormat(min, me.format),
 177                 date: min
 178             });
 179             min = utilDate.add(min, 'mi', me.increment);
 180         }
 181
 182         return Ext.create('Ext.data.Store', {
 183             fields: ['disp', 'date'],
 184             data: times
 185         });
 186     }
 187
 188 });
 189 </pre>
 190 </body>
 191 </html>