examples/docs/source/DateRangeField.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>The source code</title>
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   7 </head>
   8 <body  onload="prettyPrint();">
   9     <pre class="prettyprint lang-js">/*!
  10  * Ext JS Library 3.3.1
  11  * Copyright(c) 2006-2010 Sencha Inc.
  12  * licensing@sencha.com
  13  * http://www.sencha.com/license
  14  */
  15 <div id="cls-Ext.calendar.DateRangeField"></div>/**
  16  * @class Ext.calendar.DateRangeField
  17  * @extends Ext.form.Field
  18  * <p>A combination field that includes start and end dates and times, as well as an optional all-day checkbox.</p>
  19  * @constructor
  20  * @param {Object} config The config object
  21  */
  22 Ext.calendar.DateRangeField = Ext.extend(Ext.form.Field, {
  23     <div id="cfg-Ext.calendar.DateRangeField-toText"></div>/**
  24      * @cfg {String} toText
  25      * The text to display in between the date/time fields (defaults to 'to')
  26      */
  27     toText: 'to',
  28     <div id="cfg-Ext.calendar.DateRangeField-toText"></div>/**
  29      * @cfg {String} toText
  30      * The text to display as the label for the all day checkbox (defaults to 'All day')
  31      */
  32     allDayText: 'All day',
  33
  34     // private
  35     onRender: function(ct, position) {
  36         if (!this.el) {
  37             this.startDate = new Ext.form.DateField({
  38                 id: this.id + '-start-date',
  39                 format: 'n/j/Y',
  40                 width: 100,
  41                 listeners: {
  42                     'change': {
  43                         fn: function() {
  44                             this.checkDates('date', 'start');
  45                         },
  46                         scope: this
  47                     }
  48                 }
  49             });
  50             this.startTime = new Ext.form.TimeField({
  51                 id: this.id + '-start-time',
  52                 hidden: this.showTimes === false,
  53                 labelWidth: 0,
  54                 hideLabel: true,
  55                 width: 90,
  56                 listeners: {
  57                     'select': {
  58                         fn: function() {
  59                             this.checkDates('time', 'start');
  60                         },
  61                         scope: this
  62                     }
  63                 }
  64             });
  65             this.endTime = new Ext.form.TimeField({
  66                 id: this.id + '-end-time',
  67                 hidden: this.showTimes === false,
  68                 labelWidth: 0,
  69                 hideLabel: true,
  70                 width: 90,
  71                 listeners: {
  72                     'select': {
  73                         fn: function() {
  74                             this.checkDates('time', 'end');
  75                         },
  76                         scope: this
  77                     }
  78                 }
  79             });
  80             this.endDate = new Ext.form.DateField({
  81                 id: this.id + '-end-date',
  82                 format: 'n/j/Y',
  83                 hideLabel: true,
  84                 width: 100,
  85                 listeners: {
  86                     'change': {
  87                         fn: function() {
  88                             this.checkDates('date', 'end');
  89                         },
  90                         scope: this
  91                     }
  92                 }
  93             });
  94             this.allDay = new Ext.form.Checkbox({
  95                 id: this.id + '-allday',
  96                 hidden: this.showTimes === false || this.showAllDay === false,
  97                 boxLabel: this.allDayText,
  98                 handler: function(chk, checked) {
  99                     this.startTime.setVisible(!checked);
 100                     this.endTime.setVisible(!checked);
 101                 },
 102                 scope: this
 103             });
 104             this.toLabel = new Ext.form.Label({
 105                 xtype: 'label',
 106                 id: this.id + '-to-label',
 107                 text: this.toText
 108             });
 109
 110             this.fieldCt = new Ext.Container({
 111                 autoEl: {
 112                     id: this.id
 113                 },
 114                 //make sure the container el has the field's id
 115                 cls: 'ext-dt-range',
 116                 renderTo: ct,
 117                 layout: 'table',
 118                 layoutConfig: {
 119                     columns: 6
 120                 },
 121                 defaults: {
 122                     hideParent: true
 123                 },
 124                 items: [
 125                 this.startDate,
 126                 this.startTime,
 127                 this.toLabel,
 128                 this.endTime,
 129                 this.endDate,
 130                 this.allDay
 131                 ]
 132             });
 133
 134             this.fieldCt.ownerCt = this;
 135             this.el = this.fieldCt.getEl();
 136             this.items = new Ext.util.MixedCollection();
 137             this.items.addAll([this.startDate, this.endDate, this.toLabel, this.startTime, this.endTime, this.allDay]);
 138         }
 139         Ext.calendar.DateRangeField.superclass.onRender.call(this, ct, position);
 140     },
 141
 142     // private
 143     checkDates: function(type, startend) {
 144         var startField = Ext.getCmp(this.id + '-start-' + type),
 145         endField = Ext.getCmp(this.id + '-end-' + type),
 146         startValue = this.getDT('start'),
 147         endValue = this.getDT('end');
 148
 149         if (startValue > endValue) {
 150             if (startend == 'start') {
 151                 endField.setValue(startValue);
 152             } else {
 153                 startField.setValue(endValue);
 154                 this.checkDates(type, 'start');
 155             }
 156         }
 157         if (type == 'date') {
 158             this.checkDates('time', startend);
 159         }
 160     },
 161
 162     <div id="method-Ext.calendar.DateRangeField-getValue"></div>/**
 163      * Returns an array containing the following values in order:<div class="mdetail-params"><ul>
 164      * <li><b><code>DateTime</code></b> : <div class="sub-desc">The start date/time</div></li>
 165      * <li><b><code>DateTime</code></b> : <div class="sub-desc">The end date/time</div></li>
 166      * <li><b><code>Boolean</code></b> : <div class="sub-desc">True if the dates are all-day, false
 167      * if the time values should be used</div></li><ul></div>
 168      * @return {Array} The array of return values
 169      */
 170     getValue: function() {
 171         return [
 172         this.getDT('start'),
 173         this.getDT('end'),
 174         this.allDay.getValue()
 175         ];
 176     },
 177
 178     // private getValue helper
 179     getDT: function(startend) {
 180         var time = this[startend + 'Time'].getValue(),
 181         dt = this[startend + 'Date'].getValue();
 182
 183         if (Ext.isDate(dt)) {
 184             dt = dt.format(this[startend + 'Date'].format);
 185         }
 186         else {
 187             return null;
 188         };
 189         if (time != '' && this[startend + 'Time'].isVisible()) {
 190             return Date.parseDate(dt + ' ' + time, this[startend + 'Date'].format + ' ' + this[startend + 'Time'].format);
 191         }
 192         return Date.parseDate(dt, this[startend + 'Date'].format);
 193
 194     },
 195
 196     <div id="method-Ext.calendar.DateRangeField-setValue"></div>/**
 197      * Sets the values to use in the date range.
 198      * @param {Array/Date/Object} v The value(s) to set into the field. Valid types are as follows:<div class="mdetail-params"><ul>
 199      * <li><b><code>Array</code></b> : <div class="sub-desc">An array containing, in order, a start date, end date and all-day flag.
 200      * This array should exactly match the return type as specified by {@link #getValue}.</div></li>
 201      * <li><b><code>DateTime</code></b> : <div class="sub-desc">A single Date object, which will be used for both the start and
 202      * end dates in the range.  The all-day flag will be defaulted to false.</div></li>
 203      * <li><b><code>Object</code></b> : <div class="sub-desc">An object containing properties for StartDate, EndDate and IsAllDay
 204      * as defined in {@link Ext.calendar.EventMappings}.</div></li><ul></div>
 205      */
 206     setValue: function(v) {
 207         if (Ext.isArray(v)) {
 208             this.setDT(v[0], 'start');
 209             this.setDT(v[1], 'end');
 210             this.allDay.setValue( !! v[2]);
 211         }
 212         else if (Ext.isDate(v)) {
 213             this.setDT(v, 'start');
 214             this.setDT(v, 'end');
 215             this.allDay.setValue(false);
 216         }
 217         else if (v[Ext.calendar.EventMappings.StartDate.name]) {
 218             //object
 219             this.setDT(v[Ext.calendar.EventMappings.StartDate.name], 'start');
 220             if (!this.setDT(v[Ext.calendar.EventMappings.EndDate.name], 'end')) {
 221                 this.setDT(v[Ext.calendar.EventMappings.StartDate.name], 'end');
 222             }
 223             this.allDay.setValue( !! v[Ext.calendar.EventMappings.IsAllDay.name]);
 224         }
 225     },
 226
 227     // private setValue helper
 228     setDT: function(dt, startend) {
 229         if (dt && Ext.isDate(dt)) {
 230             this[startend + 'Date'].setValue(dt);
 231             this[startend + 'Time'].setValue(dt.format(this[startend + 'Time'].format));
 232             return true;
 233         }
 234     },
 235
 236     // inherited docs
 237     isDirty: function() {
 238         var dirty = false;
 239         if (this.rendered && !this.disabled) {
 240             this.items.each(function(item) {
 241                 if (item.isDirty()) {
 242                     dirty = true;
 243                     return false;
 244                 }
 245             });
 246         }
 247         return dirty;
 248     },
 249
 250     // private
 251     onDisable: function() {
 252         this.delegateFn('disable');
 253     },
 254
 255     // private
 256     onEnable: function() {
 257         this.delegateFn('enable');
 258     },
 259
 260     // inherited docs
 261     reset: function() {
 262         this.delegateFn('reset');
 263     },
 264
 265     // private
 266     delegateFn: function(fn) {
 267         this.items.each(function(item) {
 268             if (item[fn]) {
 269                 item[fn]();
 270             }
 271         });
 272     },
 273
 274     // private
 275     beforeDestroy: function() {
 276         Ext.destroy(this.fieldCt);
 277         Ext.calendar.DateRangeField.superclass.beforeDestroy.call(this);
 278     },
 279
 280     <div id="method-Ext.calendar.DateRangeField-getRawValue"></div>/**
 281      * @method getRawValue
 282      * @hide
 283      */
 284     getRawValue: Ext.emptyFn,
 285     <div id="method-Ext.calendar.DateRangeField-setRawValue"></div>/**
 286      * @method setRawValue
 287      * @hide
 288      */
 289     setRawValue: Ext.emptyFn
 290 });
 291
 292 Ext.reg('daterangefield', Ext.calendar.DateRangeField);
 293 </pre>
 294 </body>
 295 </html>