examples/docs/source/DayView.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.DayView"></div>/**
  16  * @class Ext.calendar.DayView
  17  * @extends Ext.Container
  18  * <p>Unlike other calendar views, is not actually a subclass of {@link Ext.calendar.CalendarView CalendarView}.
  19  * Instead it is a {@link Ext.Container Container} subclass that internally creates and manages the layouts of
  20  * a {@link Ext.calendar.DayHeaderView DayHeaderView} and a {@link Ext.calendar.DayBodyView DayBodyView}. As such
  21  * DayView accepts any config values that are valid for DayHeaderView and DayBodyView and passes those through
  22  * to the contained views. It also supports the interface required of any calendar view and in turn calls methods
  23  * on the contained views as necessary.</p>
  24  * @constructor
  25  * @param {Object} config The config object
  26  */
  27 Ext.calendar.DayView = Ext.extend(Ext.Container, {
  28     <div id="cfg-Ext.calendar.DayView-showTime"></div>/**
  29      * @cfg {Boolean} showTime
  30      * True to display the current time in today's box in the calendar, false to not display it (defautls to true)
  31      */
  32     showTime: true,
  33     <div id="cfg-Ext.calendar.DayView-showTodayText"></div>/**
  34      * @cfg {Boolean} showTodayText
  35      * True to display the {@link #todayText} string in today's box in the calendar, false to not display it (defautls to true)
  36      */
  37     showTodayText: true,
  38     <div id="cfg-Ext.calendar.DayView-todayText"></div>/**
  39      * @cfg {String} todayText
  40      * The text to display in the current day's box in the calendar when {@link #showTodayText} is true (defaults to 'Today')
  41      */
  42     todayText: 'Today',
  43     <div id="cfg-Ext.calendar.DayView-ddCreateEventText"></div>/**
  44      * @cfg {String} ddCreateEventText
  45      * The text to display inside the drag proxy while dragging over the calendar to create a new event (defaults to
  46      * 'Create event for {0}' where {0} is a date range supplied by the view)
  47      */
  48     ddCreateEventText: 'Create event for {0}',
  49     <div id="cfg-Ext.calendar.DayView-ddMoveEventText"></div>/**
  50      * @cfg {String} ddMoveEventText
  51      * The text to display inside the drag proxy while dragging an event to reposition it (defaults to
  52      * 'Move event to {0}' where {0} is the updated event start date/time supplied by the view)
  53      */
  54     ddMoveEventText: 'Move event to {0}',
  55     <div id="cfg-Ext.calendar.DayView-dayCount"></div>/**
  56      * @cfg {Number} dayCount
  57      * The number of days to display in the view (defaults to 1)
  58      */
  59     dayCount: 1,
  60
  61     // private
  62     initComponent : function(){
  63         // rendering more than 7 days per view is not supported
  64         this.dayCount = this.dayCount > 7 ? 7 : this.dayCount;
  65
  66         var cfg = Ext.apply({}, this.initialConfig);
  67         cfg.showTime = this.showTime;
  68         cfg.showTodatText = this.showTodayText;
  69         cfg.todayText = this.todayText;
  70         cfg.dayCount = this.dayCount;
  71         cfg.wekkCount = 1;
  72
  73         var header = Ext.applyIf({
  74             xtype: 'dayheaderview',
  75             id: this.id+'-hd'
  76         }, cfg);
  77
  78         var body = Ext.applyIf({
  79             xtype: 'daybodyview',
  80             id: this.id+'-bd'
  81         }, cfg);
  82
  83         this.items = [header, body];
  84         this.addClass('ext-cal-dayview ext-cal-ct');
  85
  86         Ext.calendar.DayView.superclass.initComponent.call(this);
  87     },
  88
  89     // private
  90     afterRender : function(){
  91         Ext.calendar.DayView.superclass.afterRender.call(this);
  92
  93         this.header = Ext.getCmp(this.id+'-hd');
  94         this.body = Ext.getCmp(this.id+'-bd');
  95         this.body.on('eventsrendered', this.forceSize, this);
  96     },
  97
  98     // private
  99     refresh : function(){
 100         this.header.refresh();
 101         this.body.refresh();
 102     },
 103
 104     // private
 105     forceSize: function(){
 106         // The defer call is mainly for good ol' IE, but it doesn't hurt in
 107         // general to make sure that the window resize is good and done first
 108         // so that we can properly calculate sizes.
 109         (function(){
 110             var ct = this.el.up('.x-panel-body'),
 111                 hd = this.el.child('.ext-cal-day-header'),
 112                 h = ct.getHeight() - hd.getHeight();
 113
 114             this.el.child('.ext-cal-body-ct').setHeight(h);
 115         }).defer(10, this);
 116     },
 117
 118     // private
 119     onResize : function(){
 120         this.forceSize();
 121     },
 122
 123     // private
 124     getViewBounds : function(){
 125         return this.header.getViewBounds();
 126     },
 127
 128     <div id="method-Ext.calendar.DayView-getStartDate"></div>/**
 129      * Returns the start date of the view, as set by {@link #setStartDate}. Note that this may not
 130      * be the first date displayed in the rendered calendar -- to get the start and end dates displayed
 131      * to the user use {@link #getViewBounds}.
 132      * @return {Date} The start date
 133      */
 134     getStartDate : function(){
 135         return this.header.getStartDate();
 136     },
 137
 138     <div id="method-Ext.calendar.DayView-setStartDate"></div>/**
 139      * Sets the start date used to calculate the view boundaries to display. The displayed view will be the
 140      * earliest and latest dates that match the view requirements and contain the date passed to this function.
 141      * @param {Date} dt The date used to calculate the new view boundaries
 142      */
 143     setStartDate: function(dt){
 144         this.header.setStartDate(dt, true);
 145         this.body.setStartDate(dt, true);
 146     },
 147
 148     // private
 149     renderItems: function(){
 150         this.header.renderItems();
 151         this.body.renderItems();
 152     },
 153
 154     <div id="method-Ext.calendar.DayView-isToday"></div>/**
 155      * Returns true if the view is currently displaying today's date, else false.
 156      * @return {Boolean} True or false
 157      */
 158     isToday : function(){
 159         return this.header.isToday();
 160     },
 161
 162     <div id="method-Ext.calendar.DayView-moveTo"></div>/**
 163      * Updates the view to contain the passed date
 164      * @param {Date} dt The date to display
 165      */
 166     moveTo : function(dt, noRefresh){
 167         this.header.moveTo(dt, noRefresh);
 168         this.body.moveTo(dt, noRefresh);
 169     },
 170
 171     <div id="method-Ext.calendar.DayView-moveNext"></div>/**
 172      * Updates the view to the next consecutive date(s)
 173      */
 174     moveNext : function(noRefresh){
 175         this.header.moveNext(noRefresh);
 176         this.body.moveNext(noRefresh);
 177     },
 178
 179     <div id="method-Ext.calendar.DayView-movePrev"></div>/**
 180      * Updates the view to the previous consecutive date(s)
 181      */
 182     movePrev : function(noRefresh){
 183         this.header.movePrev(noRefresh);
 184         this.body.movePrev(noRefresh);
 185     },
 186
 187     <div id="method-Ext.calendar.DayView-moveDays"></div>/**
 188      * Shifts the view by the passed number of days relative to the currently set date
 189      * @param {Number} value The number of days (positive or negative) by which to shift the view
 190      */
 191     moveDays : function(value, noRefresh){
 192         this.header.moveDays(value, noRefresh);
 193         this.body.moveDays(value, noRefresh);
 194     },
 195
 196     <div id="method-Ext.calendar.DayView-moveToday"></div>/**
 197      * Updates the view to show today
 198      */
 199     moveToday : function(noRefresh){
 200         this.header.moveToday(noRefresh);
 201         this.body.moveToday(noRefresh);
 202     }
 203 });
 204
 205 Ext.reg('dayview', Ext.calendar.DayView);
 206 </pre>
 207 </body>
 208 </html>