Upgrade to ExtJS 3.3.0 - Released 10/06/2010
[extjs.git] / examples / docs / source / DayView.html
diff --git a/examples/docs/source/DayView.html b/examples/docs/source/DayView.html
new file mode 100644 (file)
index 0000000..2565762
--- /dev/null
@@ -0,0 +1,208 @@
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
+  <title>The source code</title>
+    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+</head>
+<body  onload="prettyPrint();">
+    <pre class="prettyprint lang-js">/*!
+ * Ext JS Library 3.3.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+<div id="cls-Ext.calendar.DayView"></div>/**
+ * @class Ext.calendar.DayView
+ * @extends Ext.Container
+ * <p>Unlike other calendar views, is not actually a subclass of {@link Ext.calendar.CalendarView CalendarView}.
+ * Instead it is a {@link Ext.Container Container} subclass that internally creates and manages the layouts of
+ * a {@link Ext.calendar.DayHeaderView DayHeaderView} and a {@link Ext.calendar.DayBodyView DayBodyView}. As such
+ * DayView accepts any config values that are valid for DayHeaderView and DayBodyView and passes those through
+ * to the contained views. It also supports the interface required of any calendar view and in turn calls methods
+ * on the contained views as necessary.</p>
+ * @constructor
+ * @param {Object} config The config object
+ */
+Ext.calendar.DayView = Ext.extend(Ext.Container, {
+    <div id="cfg-Ext.calendar.DayView-showTime"></div>/**
+     * @cfg {Boolean} showTime
+     * True to display the current time in today's box in the calendar, false to not display it (defautls to true)
+     */
+    showTime: true,
+    <div id="cfg-Ext.calendar.DayView-showTodayText"></div>/**
+     * @cfg {Boolean} showTodayText
+     * True to display the {@link #todayText} string in today's box in the calendar, false to not display it (defautls to true)
+     */
+    showTodayText: true,
+    <div id="cfg-Ext.calendar.DayView-todayText"></div>/**
+     * @cfg {String} todayText
+     * The text to display in the current day's box in the calendar when {@link #showTodayText} is true (defaults to 'Today')
+     */
+    todayText: 'Today',
+    <div id="cfg-Ext.calendar.DayView-ddCreateEventText"></div>/**
+     * @cfg {String} ddCreateEventText
+     * The text to display inside the drag proxy while dragging over the calendar to create a new event (defaults to 
+     * 'Create event for {0}' where {0} is a date range supplied by the view)
+     */
+    ddCreateEventText: 'Create event for {0}',
+    <div id="cfg-Ext.calendar.DayView-ddMoveEventText"></div>/**
+     * @cfg {String} ddMoveEventText
+     * The text to display inside the drag proxy while dragging an event to reposition it (defaults to 
+     * 'Move event to {0}' where {0} is the updated event start date/time supplied by the view)
+     */
+    ddMoveEventText: 'Move event to {0}',
+    <div id="cfg-Ext.calendar.DayView-dayCount"></div>/**
+     * @cfg {Number} dayCount
+     * The number of days to display in the view (defaults to 1)
+     */
+    dayCount: 1,
+    
+    // private
+    initComponent : function(){
+        // rendering more than 7 days per view is not supported
+        this.dayCount = this.dayCount > 7 ? 7 : this.dayCount;
+        
+        var cfg = Ext.apply({}, this.initialConfig);
+        cfg.showTime = this.showTime;
+        cfg.showTodatText = this.showTodayText;
+        cfg.todayText = this.todayText;
+        cfg.dayCount = this.dayCount;
+        cfg.wekkCount = 1; 
+        
+        var header = Ext.applyIf({
+            xtype: 'dayheaderview',
+            id: this.id+'-hd'
+        }, cfg);
+        
+        var body = Ext.applyIf({
+            xtype: 'daybodyview',
+            id: this.id+'-bd'
+        }, cfg);
+        
+        this.items = [header, body];
+        this.addClass('ext-cal-dayview ext-cal-ct');
+        
+        Ext.calendar.DayView.superclass.initComponent.call(this);
+    },
+    
+    // private
+    afterRender : function(){
+        Ext.calendar.DayView.superclass.afterRender.call(this);
+        
+        this.header = Ext.getCmp(this.id+'-hd');
+        this.body = Ext.getCmp(this.id+'-bd');
+        this.body.on('eventsrendered', this.forceSize, this);
+    },
+    
+    // private
+    refresh : function(){
+        this.header.refresh();
+        this.body.refresh();
+    },
+    
+    // private
+    forceSize: function(){
+        // The defer call is mainly for good ol' IE, but it doesn't hurt in
+        // general to make sure that the window resize is good and done first
+        // so that we can properly calculate sizes.
+        (function(){
+            var ct = this.el.up('.x-panel-body'),
+                hd = this.el.child('.ext-cal-day-header'),
+                h = ct.getHeight() - hd.getHeight();
+            
+            this.el.child('.ext-cal-body-ct').setHeight(h);
+        }).defer(10, this);
+    },
+    
+    // private
+    onResize : function(){
+        this.forceSize();
+    },
+    
+    // private
+    getViewBounds : function(){
+        return this.header.getViewBounds();
+    },
+    
+    <div id="method-Ext.calendar.DayView-getStartDate"></div>/**
+     * Returns the start date of the view, as set by {@link #setStartDate}. Note that this may not 
+     * be the first date displayed in the rendered calendar -- to get the start and end dates displayed
+     * to the user use {@link #getViewBounds}.
+     * @return {Date} The start date
+     */
+    getStartDate : function(){
+        return this.header.getStartDate();
+    },
+
+    <div id="method-Ext.calendar.DayView-setStartDate"></div>/**
+     * Sets the start date used to calculate the view boundaries to display. The displayed view will be the 
+     * earliest and latest dates that match the view requirements and contain the date passed to this function.
+     * @param {Date} dt The date used to calculate the new view boundaries
+     */
+    setStartDate: function(dt){
+        this.header.setStartDate(dt, true);
+        this.body.setStartDate(dt, true);
+    },
+
+    // private
+    renderItems: function(){
+        this.header.renderItems();
+        this.body.renderItems();
+    },
+    
+    <div id="method-Ext.calendar.DayView-isToday"></div>/**
+     * Returns true if the view is currently displaying today's date, else false.
+     * @return {Boolean} True or false
+     */
+    isToday : function(){
+        return this.header.isToday();
+    },
+    
+    <div id="method-Ext.calendar.DayView-moveTo"></div>/**
+     * Updates the view to contain the passed date
+     * @param {Date} dt The date to display
+     */
+    moveTo : function(dt, noRefresh){
+        this.header.moveTo(dt, noRefresh);
+        this.body.moveTo(dt, noRefresh);
+    },
+    
+    <div id="method-Ext.calendar.DayView-moveNext"></div>/**
+     * Updates the view to the next consecutive date(s)
+     */
+    moveNext : function(noRefresh){
+        this.header.moveNext(noRefresh);
+        this.body.moveNext(noRefresh);
+    },
+    
+    <div id="method-Ext.calendar.DayView-movePrev"></div>/**
+     * Updates the view to the previous consecutive date(s)
+     */
+    movePrev : function(noRefresh){
+        this.header.movePrev(noRefresh);
+        this.body.movePrev(noRefresh);
+    },
+
+    <div id="method-Ext.calendar.DayView-moveDays"></div>/**
+     * Shifts the view by the passed number of days relative to the currently set date
+     * @param {Number} value The number of days (positive or negative) by which to shift the view
+     */
+    moveDays : function(value, noRefresh){
+        this.header.moveDays(value, noRefresh);
+        this.body.moveDays(value, noRefresh);
+    },
+    
+    <div id="method-Ext.calendar.DayView-moveToday"></div>/**
+     * Updates the view to show today
+     */
+    moveToday : function(noRefresh){
+        this.header.moveToday(noRefresh);
+        this.body.moveToday(noRefresh);
+    }
+});
+
+Ext.reg('dayview', Ext.calendar.DayView);
+</pre>    
+</body>
+</html>
\ No newline at end of file