docs/source/Time2.html

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