Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Date3.html
index 38ffe14..c780ba7 100644 (file)
@@ -3,8 +3,8 @@
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>The source code</title>
-  <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
-  <script type="text/javascript" src="../prettify/prettify.js"></script>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   <style type="text/css">
     .highlight { display: block; background-color: #ddd; }
   </style>
   </script>
 </head>
 <body onload="prettyPrint(); highlight();">
-  <pre class="prettyprint lang-js"><span id='Ext-picker-Date-method-constructor'><span id='Ext-picker-Date'>/**
-</span></span> * @class Ext.picker.Date
- * @extends Ext.Component
- * &lt;p&gt;A date picker. This class is used by the {@link Ext.form.field.Date} field to allow browsing and
- * selection of valid dates in a popup next to the field, but may also be used with other components.&lt;/p&gt;
- * &lt;p&gt;Typically you will need to implement a handler function to be notified when the user chooses a color from the
- * picker; you can register the handler using the {@link #select} event, or by implementing the {@link #handler}
- * method.&lt;/p&gt;
- * &lt;p&gt;By default the user will be allowed to pick any date; this can be changed by using the {@link #minDate},
- * {@link #maxDate}, {@link #disabledDays}, {@link #disabledDatesRE}, and/or {@link #disabledDates} configs.&lt;/p&gt;
- * &lt;p&gt;All the string values documented below may be overridden by including an Ext locale file in your page.&lt;/p&gt;
- * &lt;p&gt;Example usage:&lt;/p&gt;
- * &lt;pre&gt;&lt;code&gt;new Ext.panel.Panel({
-    title: 'Choose a future date:',
-    width: 200,
-    bodyPadding: 10,
-    renderTo: Ext.getBody(),
-    items: [{
-        xtype: 'datepicker',
-        minDate: new Date(),
-        handler: function(picker, date) {
-            // do something with the selected date
-        }
-    }]
-});&lt;/code&gt;&lt;/pre&gt;
- * {@img Ext.picker.Date/Ext.picker.Date.png Ext.picker.Date component}
- *
- * @constructor
- * Create a new DatePicker
- * @param {Object} config The config object
+  <pre class="prettyprint lang-js"><span id='Ext-grid-column-Date'>/**
+</span> * A Column definition class which renders a passed date according to the default locale, or a configured
+ * {@link #format}.
  *
- * @xtype datepicker
+ *     @example
+ *     Ext.create('Ext.data.Store', {
+ *         storeId:'sampleStore',
+ *         fields:[
+ *             { name: 'symbol', type: 'string' },
+ *             { name: 'date',   type: 'date' },
+ *             { name: 'change', type: 'number' },
+ *             { name: 'volume', type: 'number' },
+ *             { name: 'topday', type: 'date' }                        
+ *         ],
+ *         data:[
+ *             { symbol: &quot;msft&quot;,   date: '2011/04/22', change: 2.43, volume: 61606325, topday: '04/01/2010' },
+ *             { symbol: &quot;goog&quot;,   date: '2011/04/22', change: 0.81, volume: 3053782,  topday: '04/11/2010' },
+ *             { symbol: &quot;apple&quot;,  date: '2011/04/22', change: 1.35, volume: 24484858, topday: '04/28/2010' },            
+ *             { symbol: &quot;sencha&quot;, date: '2011/04/22', change: 8.85, volume: 5556351,  topday: '04/22/2010' }            
+ *         ]
+ *     });
+ *     
+ *     Ext.create('Ext.grid.Panel', {
+ *         title: 'Date Column Demo',
+ *         store: Ext.data.StoreManager.lookup('sampleStore'),
+ *         columns: [
+ *             { text: 'Symbol',   dataIndex: 'symbol', flex: 1 },
+ *             { text: 'Date',     dataIndex: 'date',   xtype: 'datecolumn',   format:'Y-m-d' },
+ *             { text: 'Change',   dataIndex: 'change', xtype: 'numbercolumn', format:'0.00' },
+ *             { text: 'Volume',   dataIndex: 'volume', xtype: 'numbercolumn', format:'0,000' },
+ *             { text: 'Top Day',  dataIndex: 'topday', xtype: 'datecolumn',   format:'l' }            
+ *         ],
+ *         height: 200,
+ *         width: 450,
+ *         renderTo: Ext.getBody()
+ *     });
  */
-Ext.define('Ext.picker.Date', {
-    extend: 'Ext.Component',
-    requires: [
-        'Ext.XTemplate',
-        'Ext.button.Button',
-        'Ext.button.Split',
-        'Ext.util.ClickRepeater',
-        'Ext.util.KeyNav',
-        'Ext.EventObject',
-        'Ext.fx.Manager',
-        'Ext.picker.Month'
-    ],
-    alias: 'widget.datepicker',
-    alternateClassName: 'Ext.DatePicker',
-
-    renderTpl: [
-        '&lt;div class=&quot;{cls}&quot; id=&quot;{id}&quot; role=&quot;grid&quot; title=&quot;{ariaTitle} {value:this.longDay}&quot;&gt;',
-            '&lt;div role=&quot;presentation&quot; class=&quot;{baseCls}-header&quot;&gt;',
-                '&lt;div class=&quot;{baseCls}-prev&quot;&gt;&lt;a href=&quot;#&quot; role=&quot;button&quot; title=&quot;{prevText}&quot;&gt;&lt;/a&gt;&lt;/div&gt;',
-                '&lt;div class=&quot;{baseCls}-month&quot;&gt;&lt;/div&gt;',
-                '&lt;div class=&quot;{baseCls}-next&quot;&gt;&lt;a href=&quot;#&quot; role=&quot;button&quot; title=&quot;{nextText}&quot;&gt;&lt;/a&gt;&lt;/div&gt;',
-            '&lt;/div&gt;',
-            '&lt;table class=&quot;{baseCls}-inner&quot; cellspacing=&quot;0&quot; role=&quot;presentation&quot;&gt;',
-                '&lt;thead role=&quot;presentation&quot;&gt;&lt;tr role=&quot;presentation&quot;&gt;',
-                    '&lt;tpl for=&quot;dayNames&quot;&gt;',
-                        '&lt;th role=&quot;columnheader&quot; title=&quot;{.}&quot;&gt;&lt;span&gt;{.:this.firstInitial}&lt;/span&gt;&lt;/th&gt;',
-                    '&lt;/tpl&gt;',
-                '&lt;/tr&gt;&lt;/thead&gt;',
-                '&lt;tbody role=&quot;presentation&quot;&gt;&lt;tr role=&quot;presentation&quot;&gt;',
-                    '&lt;tpl for=&quot;days&quot;&gt;',
-                        '{#:this.isEndOfWeek}',
-                        '&lt;td role=&quot;gridcell&quot; id=&quot;{[Ext.id()]}&quot;&gt;',
-                            '&lt;a role=&quot;presentation&quot; href=&quot;#&quot; hidefocus=&quot;on&quot; class=&quot;{parent.baseCls}-date&quot; tabIndex=&quot;1&quot;&gt;',
-                                '&lt;em role=&quot;presentation&quot;&gt;&lt;span role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/em&gt;',
-                            '&lt;/a&gt;',
-                        '&lt;/td&gt;',
-                    '&lt;/tpl&gt;',
-                '&lt;/tr&gt;&lt;/tbody&gt;',
-            '&lt;/table&gt;',
-            '&lt;tpl if=&quot;showToday&quot;&gt;',
-                '&lt;div role=&quot;presentation&quot; class=&quot;{baseCls}-footer&quot;&gt;&lt;/div&gt;',
-            '&lt;/tpl&gt;',
-        '&lt;/div&gt;',
-        {
-            firstInitial: function(value) {
-                return value.substr(0,1);
-            },
-            isEndOfWeek: function(value) {
-                // convert from 1 based index to 0 based
-                // by decrementing value once.
-                value--;
-                var end = value % 7 === 0 &amp;&amp; value !== 0;
-                return end ? '&lt;/tr&gt;&lt;tr role=&quot;row&quot;&gt;' : '';
-            },
-            longDay: function(value){
-                return Ext.Date.format(value, this.longDayFormat);
-            }
-        }
-    ],
+Ext.define('Ext.grid.column.Date', {
+    extend: 'Ext.grid.column.Column',
+    alias: ['widget.datecolumn'],
+    requires: ['Ext.Date'],
+    alternateClassName: 'Ext.grid.DateColumn',
 
-    ariaTitle: 'Date Picker',
-<span id='Ext-picker-Date-cfg-todayText'>    /**
-</span>     * @cfg {String} todayText
-     * The text to display on the button that selects the current date (defaults to &lt;code&gt;'Today'&lt;/code&gt;)
-     */
-    todayText : 'Today',
-<span id='Ext-picker-Date-cfg-handler'>    /**
-</span>     * @cfg {Function} handler
-     * Optional. A function that will handle the select event of this picker.
-     * The handler is passed the following parameters:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
-     * &lt;li&gt;&lt;code&gt;picker&lt;/code&gt; : Ext.picker.Date &lt;div class=&quot;sub-desc&quot;&gt;This Date picker.&lt;/div&gt;&lt;/li&gt;
-     * &lt;li&gt;&lt;code&gt;date&lt;/code&gt; : Date &lt;div class=&quot;sub-desc&quot;&gt;The selected date.&lt;/div&gt;&lt;/li&gt;
-     * &lt;/ul&gt;&lt;/div&gt;
-     */
-<span id='Ext-picker-Date-cfg-scope'>    /**
-</span>     * @cfg {Object} scope
-     * The scope (&lt;code&gt;&lt;b&gt;this&lt;/b&gt;&lt;/code&gt; reference) in which the &lt;code&gt;{@link #handler}&lt;/code&gt;
-     * function will be called.  Defaults to this DatePicker instance.
-     */
-<span id='Ext-picker-Date-cfg-todayTip'>    /**
-</span>     * @cfg {String} todayTip
-     * A string used to format the message for displaying in a tooltip over the button that
-     * selects the current date. Defaults to &lt;code&gt;'{0} (Spacebar)'&lt;/code&gt; where
-     * the &lt;code&gt;{0}&lt;/code&gt; token is replaced by today's date.
-     */
-    todayTip : '{0} (Spacebar)',
-<span id='Ext-picker-Date-cfg-minText'>    /**
-</span>     * @cfg {String} minText
-     * The error text to display if the minDate validation fails (defaults to &lt;code&gt;'This date is before the minimum date'&lt;/code&gt;)
-     */
-    minText : 'This date is before the minimum date',
-<span id='Ext-picker-Date-cfg-maxText'>    /**
-</span>     * @cfg {String} maxText
-     * The error text to display if the maxDate validation fails (defaults to &lt;code&gt;'This date is after the maximum date'&lt;/code&gt;)
-     */
-    maxText : 'This date is after the maximum date',
-<span id='Ext-picker-Date-cfg-format'>    /**
+<span id='Ext-grid-column-Date-cfg-format'>    /**
 </span>     * @cfg {String} format
-     * The default date format string which can be overriden for localization support.  The format must be
-     * valid according to {@link Ext.Date#parse} (defaults to {@link Ext.Date#defaultFormat}).
-     */
-<span id='Ext-picker-Date-cfg-disabledDaysText'>    /**
-</span>     * @cfg {String} disabledDaysText
-     * The tooltip to display when the date falls on a disabled day (defaults to &lt;code&gt;'Disabled'&lt;/code&gt;)
-     */
-    disabledDaysText : 'Disabled',
-<span id='Ext-picker-Date-cfg-disabledDatesText'>    /**
-</span>     * @cfg {String} disabledDatesText
-     * The tooltip text to display when the date falls on a disabled date (defaults to &lt;code&gt;'Disabled'&lt;/code&gt;)
-     */
-    disabledDatesText : 'Disabled',
-<span id='Ext-picker-Date-cfg-monthNames'>    /**
-</span>     * @cfg {Array} monthNames
-     * An array of textual month names which can be overriden for localization support (defaults to Ext.Date.monthNames)
-     */
-<span id='Ext-picker-Date-cfg-dayNames'>    /**
-</span>     * @cfg {Array} dayNames
-     * An array of textual day names which can be overriden for localization support (defaults to Ext.Date.dayNames)
-     */
-<span id='Ext-picker-Date-cfg-nextText'>    /**
-</span>     * @cfg {String} nextText
-     * The next month navigation button tooltip (defaults to &lt;code&gt;'Next Month (Control+Right)'&lt;/code&gt;)
-     */
-    nextText : 'Next Month (Control+Right)',
-<span id='Ext-picker-Date-cfg-prevText'>    /**
-</span>     * @cfg {String} prevText
-     * The previous month navigation button tooltip (defaults to &lt;code&gt;'Previous Month (Control+Left)'&lt;/code&gt;)
-     */
-    prevText : 'Previous Month (Control+Left)',
-<span id='Ext-picker-Date-cfg-monthYearText'>    /**
-</span>     * @cfg {String} monthYearText
-     * The header month selector tooltip (defaults to &lt;code&gt;'Choose a month (Control+Up/Down to move years)'&lt;/code&gt;)
-     */
-    monthYearText : 'Choose a month (Control+Up/Down to move years)',
-<span id='Ext-picker-Date-cfg-startDay'>    /**
-</span>     * @cfg {Number} startDay
-     * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
-     */
-    startDay : 0,
-<span id='Ext-picker-Date-cfg-showToday'>    /**
-</span>     * @cfg {Boolean} showToday
-     * False to hide the footer area containing the Today button and disable the keyboard handler for spacebar
-     * that selects the current date (defaults to &lt;code&gt;true&lt;/code&gt;).
-     */
-    showToday : true,
-<span id='Ext-picker-Date-cfg-minDate'>    /**
-</span>     * @cfg {Date} minDate
-     * Minimum allowable date (JavaScript date object, defaults to null)
-     */
-<span id='Ext-picker-Date-cfg-maxDate'>    /**
-</span>     * @cfg {Date} maxDate
-     * Maximum allowable date (JavaScript date object, defaults to null)
-     */
-<span id='Ext-picker-Date-cfg-disabledDays'>    /**
-</span>     * @cfg {Array} disabledDays
-     * An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
-     */
-<span id='Ext-picker-Date-cfg-disabledDatesRE'>    /**
-</span>     * @cfg {RegExp} disabledDatesRE
-     * JavaScript regular expression used to disable a pattern of dates (defaults to null).  The {@link #disabledDates}
-     * config will generate this regex internally, but if you specify disabledDatesRE it will take precedence over the
-     * disabledDates value.
-     */
-<span id='Ext-picker-Date-cfg-disabledDates'>    /**
-</span>     * @cfg {Array} disabledDates
-     * An array of 'dates' to disable, as strings. These strings will be used to build a dynamic regular
-     * expression so they are very powerful. Some examples:
-     * &lt;ul&gt;
-     * &lt;li&gt;['03/08/2003', '09/16/2003'] would disable those exact dates&lt;/li&gt;
-     * &lt;li&gt;['03/08', '09/16'] would disable those days for every year&lt;/li&gt;
-     * &lt;li&gt;['^03/08'] would only match the beginning (useful if you are using short years)&lt;/li&gt;
-     * &lt;li&gt;['03/../2006'] would disable every day in March 2006&lt;/li&gt;
-     * &lt;li&gt;['^03'] would disable every day in every March&lt;/li&gt;
-     * &lt;/ul&gt;
-     * Note that the format of the dates included in the array should exactly match the {@link #format} config.
-     * In order to support regular expressions, if you are using a date format that has '.' in it, you will have to
-     * escape the dot when restricting dates. For example: ['03\\.08\\.03'].
-     */
-
-<span id='Ext-picker-Date-cfg-disableAnim'>    /**
-</span>     * @cfg {Boolean} disableAnim True to disable animations when showing the month picker. Defaults to &lt;tt&gt;false&lt;/tt&gt;.
-     */
-    disableAnim: true,
-
-<span id='Ext-picker-Date-cfg-baseCls'>    /**
-</span>     * @cfg {String} baseCls
-     * The base CSS class to apply to this components element (defaults to &lt;tt&gt;'x-datepicker'&lt;/tt&gt;).
-     */
-    baseCls: Ext.baseCSSPrefix + 'datepicker',
-
-<span id='Ext-picker-Date-cfg-selectedCls'>    /**
-</span>     * @cfg {String} selectedCls
-     * The class to apply to the selected cell. Defaults to &lt;tt&gt;'x-datepicker-selected'&lt;/tt&gt;
-     */
-
-<span id='Ext-picker-Date-cfg-disabledCellCls'>    /**
-</span>     * @cfg {String} disabledCellCls
-     * The class to apply to disabled cells. Defaults to &lt;tt&gt;'x-datepicker-disabled'&lt;/tt&gt;
-     */
-
-<span id='Ext-picker-Date-cfg-longDayFormat'>    /**
-</span>     * @cfg {String} longDayFormat
-     * The format for displaying a date in a longer format. Defaults to &lt;tt&gt;'F d, Y'&lt;/tt&gt;
-     */
-    longDayFormat: 'F d, Y',
-
-<span id='Ext-picker-Date-cfg-keyNavConfig'>    /**
-</span>     * @cfg {Object} keyNavConfig Specifies optional custom key event handlers for the {@link Ext.util.KeyNav}
-     * attached to this date picker. Must conform to the config format recognized by the {@link Ext.util.KeyNav}
-     * constructor. Handlers specified in this object will replace default handlers of the same name.
-     */
-
-<span id='Ext-picker-Date-cfg-focusOnShow'>    /**
-</span>     * @cfg {Boolean} focusOnShow
-     * True to automatically focus the picker on show. Defaults to &lt;tt&gt;false&lt;/tt&gt;.
-     */
-    focusOnShow: false,
-
-    // private
-    // Set by other components to stop the picker focus being updated when the value changes.
-    focusOnSelect: true,
-
-    width: 178,
-
-    // default value used to initialise each date in the DatePicker
-    // (note: 12 noon was chosen because it steers well clear of all DST timezone changes)
-    initHour: 12, // 24-hour format
-
-    numDays: 42,
-
-    // private, inherit docs
-    initComponent : function() {
-        var me = this,
-            clearTime = Ext.Date.clearTime;
-
-        me.selectedCls = me.baseCls + '-selected';
-        me.disabledCellCls = me.baseCls + '-disabled';
-        me.prevCls = me.baseCls + '-prevday';
-        me.activeCls = me.baseCls + '-active';
-        me.nextCls = me.baseCls + '-prevday';
-        me.todayCls = me.baseCls + '-today';
-        me.dayNames = me.dayNames.slice(me.startDay).concat(me.dayNames.slice(0, me.startDay));
-        this.callParent();
-
-        me.value = me.value ?
-                 clearTime(me.value, true) : clearTime(new Date());
-
-        me.addEvents(
-<span id='Ext-picker-Date-event-select'>            /**
-</span>             * @event select
-             * Fires when a date is selected
-             * @param {DatePicker} this DatePicker
-             * @param {Date} date The selected date
-             */
-            'select'
-        );
-
-        me.initDisabledDays();
-    },
-
-    // private, inherit docs
-    onRender : function(container, position){
-        /*
-         * days array for looping through 6 full weeks (6 weeks * 7 days)
-         * Note that we explicitly force the size here so the template creates
-         * all the appropriate cells.
-         */
-
-        var me = this,
-            days = new Array(me.numDays),
-            today = Ext.Date.format(new Date(), me.format);
-
-        Ext.applyIf(me, {
-            renderData: {},
-            renderSelectors: {}
-        });
-
-        Ext.apply(me.renderData, {
-            dayNames: me.dayNames,
-            ariaTitle: me.ariaTitle,
-            value: me.value,
-            showToday: me.showToday,
-            prevText: me.prevText,
-            nextText: me.nextText,
-            days: days
-        });
-        me.getTpl('renderTpl').longDayFormat = me.longDayFormat;
-
-        Ext.apply(me.renderSelectors, {
-            eventEl: 'table.' + me.baseCls + '-inner',
-            prevEl: '.' + me.baseCls + '-prev a',
-            nextEl: '.' + me.baseCls + '-next a',
-            middleBtnEl: '.' + me.baseCls + '-month',
-            footerEl: '.' + me.baseCls + '-footer'
-        });
-
-        this.callParent(arguments);
-        me.el.unselectable();
-
-        me.cells = me.eventEl.select('tbody td');
-        me.textNodes = me.eventEl.query('tbody td span');
-
-        me.monthBtn = Ext.create('Ext.button.Split', {
-            text: '',
-            tooltip: me.monthYearText,
-            renderTo: me.middleBtnEl
-        });
-        //~ me.middleBtnEl.down('button').addCls(Ext.baseCSSPrefix + 'btn-arrow');
-
-
-        me.todayBtn = Ext.create('Ext.button.Button', {
-            renderTo: me.footerEl,
-            text: Ext.String.format(me.todayText, today),
-            tooltip: Ext.String.format(me.todayTip, today),
-            handler: me.selectToday,
-            scope: me
-        });
-    },
-
-    // private, inherit docs
-    initEvents: function(){
-        var me = this,
-            eDate = Ext.Date,
-            day = eDate.DAY;
-
-        this.callParent();
-
-        me.prevRepeater = Ext.create('Ext.util.ClickRepeater', me.prevEl, {
-            handler: me.showPrevMonth,
-            scope: me,
-            preventDefault: true,
-            stopDefault: true
-        });
-
-        me.nextRepeater = Ext.create('Ext.util.ClickRepeater', me.nextEl, {
-            handler: me.showNextMonth,
-            scope: me,
-            preventDefault:true,
-            stopDefault:true
-        });
-
-        me.keyNav = Ext.create('Ext.util.KeyNav', me.eventEl, Ext.apply({
-            scope: me,
-            'left' : function(e){
-                if(e.ctrlKey){
-                    me.showPrevMonth();
-                }else{
-                    me.update(eDate.add(me.activeDate, day, -1));
-                }
-            },
-
-            'right' : function(e){
-                if(e.ctrlKey){
-                    me.showNextMonth();
-                }else{
-                    me.update(eDate.add(me.activeDate, day, 1));
-                }
-            },
-
-            'up' : function(e){
-                if(e.ctrlKey){
-                    me.showNextYear();
-                }else{
-                    me.update(eDate.add(me.activeDate, day, -7));
-                }
-            },
-
-            'down' : function(e){
-                if(e.ctrlKey){
-                    me.showPrevYear();
-                }else{
-                    me.update(eDate.add(me.activeDate, day, 7));
-                }
-            },
-            'pageUp' : me.showNextMonth,
-            'pageDown' : me.showPrevMonth,
-            'enter' : function(e){
-                e.stopPropagation();
-                return true;
-            }
-        }, me.keyNavConfig));
-
-        if(me.showToday){
-            me.todayKeyListener = me.eventEl.addKeyListener(Ext.EventObject.SPACE, me.selectToday,  me);
-        }
-        me.mon(me.eventEl, 'mousewheel', me.handleMouseWheel, me);
-        me.mon(me.eventEl, 'click', me.handleDateClick,  me, {delegate: 'a.' + me.baseCls + '-date'});
-        me.mon(me.monthBtn, 'click', me.showMonthPicker, me);
-        me.mon(me.monthBtn, 'arrowclick', me.showMonthPicker, me);
-        me.update(me.value);
-    },
-
-<span id='Ext-picker-Date-method-initDisabledDays'>    /**
-</span>     * Setup the disabled dates regex based on config options
-     * @private
+     * A formatting string as used by {@link Ext.Date#format} to format a Date for this Column.
+     * This defaults to the default date from {@link Ext.Date#defaultFormat} which itself my be overridden
+     * in a locale file.
      */
-    initDisabledDays : function(){
-        var me = this,
-            dd = me.disabledDates,
-            re = '(?:',
-            len;
-
-        if(!me.disabledDatesRE &amp;&amp; dd){
-                len = dd.length - 1;
 
-            Ext.each(dd, function(d, i){
-                re += Ext.isDate(d) ? '^' + Ext.String.escapeRegex(Ext.Date.dateFormat(d, me.format)) + '$' : dd[i];
-                if(i != len){
-                    re += '|';
-                }
-            }, me);
-            me.disabledDatesRE = new RegExp(re + ')');
-        }
-    },
-
-<span id='Ext-picker-Date-method-setDisabledDates'>    /**
-</span>     * Replaces any existing disabled dates with new values and refreshes the DatePicker.
-     * @param {Array/RegExp} disabledDates An array of date strings (see the {@link #disabledDates} config
-     * for details on supported values), or a JavaScript regular expression used to disable a pattern of dates.
-     * @return {Ext.picker.Date} this
-     */
-    setDisabledDates : function(dd){
+    initComponent: function(){
         var me = this;
-
-        if(Ext.isArray(dd)){
-            me.disabledDates = dd;
-            me.disabledDatesRE = null;
-        }else{
-            me.disabledDatesRE = dd;
-        }
-        me.initDisabledDays();
-        me.update(me.value, true);
-        return me;
-    },
-
-<span id='Ext-picker-Date-method-setDisabledDays'>    /**
-</span>     * Replaces any existing disabled days (by index, 0-6) with new values and refreshes the DatePicker.
-     * @param {Array} disabledDays An array of disabled day indexes. See the {@link #disabledDays} config
-     * for details on supported values.
-     * @return {Ext.picker.Date} this
-     */
-    setDisabledDays : function(dd){
-        this.disabledDays = dd;
-        return this.update(this.value, true);
-    },
-
-<span id='Ext-picker-Date-method-setMinDate'>    /**
-</span>     * Replaces any existing {@link #minDate} with the new value and refreshes the DatePicker.
-     * @param {Date} value The minimum date that can be selected
-     * @return {Ext.picker.Date} this
-     */
-    setMinDate : function(dt){
-        this.minDate = dt;
-        return this.update(this.value, true);
-    },
-
-<span id='Ext-picker-Date-method-setMaxDate'>    /**
-</span>     * Replaces any existing {@link #maxDate} with the new value and refreshes the DatePicker.
-     * @param {Date} value The maximum date that can be selected
-     * @return {Ext.picker.Date} this
-     */
-    setMaxDate : function(dt){
-        this.maxDate = dt;
-        return this.update(this.value, true);
-    },
-
-<span id='Ext-picker-Date-method-setValue'>    /**
-</span>     * Sets the value of the date field
-     * @param {Date} value The date to set
-     * @return {Ext.picker.Date} this
-     */
-    setValue : function(value){
-        this.value = Ext.Date.clearTime(value, true);
-        return this.update(this.value);
-    },
-
-<span id='Ext-picker-Date-method-getValue'>    /**
-</span>     * Gets the current selected value of the date field
-     * @return {Date} The selected date
-     */
-    getValue : function(){
-        return this.value;
-    },
-
-    // private
-    focus : function(){
-        this.update(this.activeDate);
-    },
-
-    // private, inherit docs
-    onEnable: function(){
-        this.callParent();
-        this.setDisabledStatus(false);
-        this.update(this.activeDate);
-
-    },
-
-    // private, inherit docs
-    onDisable : function(){
-        this.callParent();
-        this.setDisabledStatus(true);
-    },
-
-<span id='Ext-picker-Date-method-setDisabledStatus'>    /**
-</span>     * Set the disabled state of various internal components
-     * @private
-     * @param {Boolean} disabled
-     */
-    setDisabledStatus : function(disabled){
-        var me = this;
-
-        me.keyNav.setDisabled(disabled);
-        me.prevRepeater.setDisabled(disabled);
-        me.nextRepeater.setDisabled(disabled);
-        if (me.showToday) {
-            me.todayKeyListener.setDisabled(disabled);
-            me.todayBtn.setDisabled(disabled);
-        }
-    },
-
-<span id='Ext-picker-Date-method-getActive'>    /**
-</span>     * Get the current active date.
-     * @private
-     * @return {Date} The active date
-     */
-    getActive: function(){
-        return this.activeDate || me.value;
-    },
-
-<span id='Ext-picker-Date-method-runAnimation'>    /**
-</span>     * Run any animation required to hide/show the month picker.
-     * @private
-     * @param {Boolean} isHide True if it's a hide operation
-     */
-    runAnimation: function(isHide){
-        var options = {
-                target: this.monthPicker,
-                duration: 200
-            };
-
-        Ext.fx.Manager.run();
-        if (isHide) {
-            //TODO: slideout
-        } else {
-            //TODO: slidein
-        }
-        Ext.create('Ext.fx.Anim', options);
-    },
-
-<span id='Ext-picker-Date-method-hideMonthPicker'>    /**
-</span>     * Hides the month picker, if it's visible.
-     * @return {Ext.picker.Date} this
-     */
-    hideMonthPicker : function(){
-        var me = this,
-            picker = me.monthPicker;
-
-        if (picker) {
-            if (me.disableAnim) {
-                picker.hide();
-            } else {
-                this.runAnimation(true);
-            }
-        }
-        return me;
-    },
-
-<span id='Ext-picker-Date-method-showMonthPicker'>    /**
-</span>     * Show the month picker
-     * @return {Ext.picker.Date} this
-     */
-    showMonthPicker : function(){
-
-        var me = this,
-            picker,
-            size,
-            top,
-            left;
-
-
-        if (me.rendered &amp;&amp; !me.disabled) {
-            size = me.getSize();
-            picker = me.createMonthPicker();
-            picker.show();
-            picker.setSize(size);
-            picker.setValue(me.getActive());
-
-            if (me.disableAnim) {
-                picker.setPosition(-1, -1);
-            } else {
-                me.runAnimation(false);
-            }
-        }
-        return me;
-    },
-
-<span id='Ext-picker-Date-method-createMonthPicker'>    /**
-</span>     * Create the month picker instance
-     * @private
-     * @return {Ext.picker.Month} picker
-     */
-    createMonthPicker: function(){
-        var me = this,
-            picker = me.monthPicker;
-
-        if (!picker) {
-            me.monthPicker = picker = Ext.create('Ext.picker.Month', {
-                renderTo: me.el,
-                floating: true,
-                shadow: false,
-                listeners: {
-                    scope: me,
-                    cancelclick: me.onCancelClick,
-                    okclick: me.onOkClick,
-                    yeardblclick: me.onOkClick,
-                    monthdblclick: me.onOkClick
-                }
-            });
-
-            me.on('beforehide', me.hideMonthPicker, me);
-        }
-        return picker;
-    },
-
-<span id='Ext-picker-Date-method-onOkClick'>    /**
-</span>     * Respond to an ok click on the month picker
-     * @private
-     */
-    onOkClick: function(picker, value){
-        var me = this,
-            month = value[0],
-            year = value[1],
-            date = new Date(year, month, me.getActive().getDate());
-
-        if (date.getMonth() !== month) {
-            // 'fix' the JS rolling date conversion if needed
-            date = new Date(year, month, 1).getLastDateOfMonth();
-        }
-        me.update(date);
-        me.hideMonthPicker();
-    },
-
-<span id='Ext-picker-Date-method-onCancelClick'>    /**
-</span>     * Respond to a cancel click on the month picker
-     * @private
-     */
-    onCancelClick: function(){
-        this.hideMonthPicker();
-    },
-
-<span id='Ext-picker-Date-method-showPrevMonth'>    /**
-</span>     * Show the previous month.
-     * @return {Ext.picker.Date} this
-     */
-    showPrevMonth : function(e){
-        return this.update(Ext.Date.add(this.activeDate, Ext.Date.MONTH, -1));
-    },
-
-<span id='Ext-picker-Date-method-showNextMonth'>    /**
-</span>     * Show the next month.
-     * @return {Ext.picker.Date} this
-     */
-    showNextMonth : function(e){
-        return this.update(Ext.Date.add(this.activeDate, Ext.Date.MONTH, 1));
-    },
-
-<span id='Ext-picker-Date-method-showPrevYear'>    /**
-</span>     * Show the previous year.
-     * @return {Ext.picker.Date} this
-     */
-    showPrevYear : function(){
-        this.update(Ext.Date.add(this.activeDate, Ext.Date.YEAR, -1));
-    },
-
-<span id='Ext-picker-Date-method-showNextYear'>    /**
-</span>     * Show the next year.
-     * @return {Ext.picker.Date} this
-     */
-    showNextYear : function(){
-        this.update(Ext.Date.add(this.activeDate, Ext.Date.YEAR, 1));
-    },
-
-<span id='Ext-picker-Date-method-handleMouseWheel'>    /**
-</span>     * Respond to the mouse wheel event
-     * @private
-     * @param {Ext.EventObject} e
-     */
-    handleMouseWheel : function(e){
-        e.stopEvent();
-        if(!this.disabled){
-            var delta = e.getWheelDelta();
-            if(delta &gt; 0){
-                this.showPrevMonth();
-            } else if(delta &lt; 0){
-                this.showNextMonth();
-            }
-        }
-    },
-
-<span id='Ext-picker-Date-method-handleDateClick'>    /**
-</span>     * Respond to a date being clicked in the picker
-     * @private
-     * @param {Ext.EventObject} e
-     * @param {HTMLElement} t
-     */
-    handleDateClick : function(e, t){
-        var me = this,
-            handler = me.handler;
-
-        e.stopEvent();
-        if(!me.disabled &amp;&amp; t.dateValue &amp;&amp; !Ext.fly(t.parentNode).hasCls(me.disabledCellCls)){
-            me.cancelFocus = me.focusOnSelect === false;
-            me.setValue(new Date(t.dateValue));
-            delete me.cancelFocus;
-            me.fireEvent('select', me, me.value);
-            if (handler) {
-                handler.call(me.scope || me, me, me.value);
-            }
-            // event handling is turned off on hide
-            // when we are using the picker in a field
-            // therefore onSelect comes AFTER the select
-            // event.
-            me.onSelect();
-        }
-    },
-
-<span id='Ext-picker-Date-method-onSelect'>    /**
-</span>     * Perform any post-select actions
-     * @private
-     */
-    onSelect: function() {
-        if (this.hideOnSelect) {
-             this.hide();
-         }
-    },
-
-<span id='Ext-picker-Date-method-selectToday'>    /**
-</span>     * Sets the current value to today.
-     * @return {Ext.picker.Date} this
-     */
-    selectToday : function(){
-        var me = this,
-            btn = me.todayBtn,
-            handler = me.handler;
-
-        if(btn &amp;&amp; !btn.disabled){
-            me.setValue(Ext.Date.clearTime(new Date()));
-            me.fireEvent('select', me, me.value);
-            if (handler) {
-                handler.call(me.scope || me, me, me.value);
-            }
-            me.onSelect();
-        }
-        return me;
-    },
-
-<span id='Ext-picker-Date-method-selectedUpdate'>    /**
-</span>     * Update the selected cell
-     * @private
-     * @param {Date} date The new date
-     * @param {Date} active The active date
-     */
-    selectedUpdate: function(date, active){
-        var me = this,
-            t = date.getTime(),
-            cells = me.cells,
-            cls = me.selectedCls;
-
-        cells.removeCls(cls);
-        cells.each(function(c){
-            if (c.dom.firstChild.dateValue == t) {
-                me.el.dom.setAttribute('aria-activedescendent', c.dom.id);
-                c.addCls(cls);
-                if(me.isVisible() &amp;&amp; !me.cancelFocus){
-                    Ext.fly(c.dom.firstChild).focus(50);
-                }
-                return false;
-            }
-        }, this);
-    },
-
-<span id='Ext-picker-Date-method-fullUpdate'>    /**
-</span>     * Update the contents of the picker for a new month
-     * @private
-     * @param {Date} date The new date
-     * @param {Date} active The active date
-     */
-    fullUpdate: function(date, active){
-        var me = this,
-            cells = me.cells.elements,
-            textNodes = me.textNodes,
-            disabledCls = me.disabledCellCls,
-            eDate = Ext.Date,
-            i = 0,
-            extraDays = 0,
-            visible = me.isVisible(),
-            sel = +eDate.clearTime(date, true),
-            today = +eDate.clearTime(new Date()),
-            min = me.minDate ? eDate.clearTime(me.minDate, true) : Number.NEGATIVE_INFINITY,
-            max = me.maxDate ? eDate.clearTime(me.maxDate, true) : Number.POSITIVE_INFINITY,
-            ddMatch = me.disabledDatesRE,
-            ddText = me.disabledDatesText,
-            ddays = me.disabledDays ? me.disabledDays.join('') : false,
-            ddaysText = me.disabledDaysText,
-            format = me.format,
-            days = eDate.getDaysInMonth(date),
-            firstOfMonth = eDate.getFirstDateOfMonth(date),
-            startingPos = firstOfMonth.getDay() - me.startDay,
-            previousMonth = eDate.add(date, eDate.MONTH, -1),
-            longDayFormat = me.longDayFormat,
-            prevStart,
-            current,
-            disableToday,
-            tempDate,
-            setCellClass,
-            html,
-            cls,
-            formatValue,
-            value;
-
-        if (startingPos &lt; 0) {
-            startingPos += 7;
-        }
-
-        days += startingPos;
-        prevStart = eDate.getDaysInMonth(previousMonth) - startingPos;
-        current = new Date(previousMonth.getFullYear(), previousMonth.getMonth(), prevStart, me.initHour);
-
-        if (me.showToday) {
-            tempDate = eDate.clearTime(new Date());
-            disableToday = (tempDate &lt; min || tempDate &gt; max ||
-                (ddMatch &amp;&amp; format &amp;&amp; ddMatch.test(eDate.dateFormat(tempDate, format))) ||
-                (ddays &amp;&amp; ddays.indexOf(tempDate.getDay()) != -1));
-
-            if (!me.disabled) {
-                me.todayBtn.setDisabled(disableToday);
-                me.todayKeyListener.setDisabled(disableToday);
-            }
-        }
-
-        setCellClass = function(cell){
-            value = +eDate.clearTime(current, true);
-            cell.title = eDate.format(current, longDayFormat);
-            // store dateValue number as an expando
-            cell.firstChild.dateValue = value;
-            if(value == today){
-                cell.className += ' ' + me.todayCls;
-                cell.title = me.todayText;
-            }
-            if(value == sel){
-                cell.className += ' ' + me.selectedCls;
-                me.el.dom.setAttribute('aria-activedescendant', cell.id);
-                if (visible &amp;&amp; me.floating) {
-                    Ext.fly(cell.firstChild).focus(50);
-                }
-            }
-            // disabling
-            if(value &lt; min) {
-                cell.className = disabledCls;
-                cell.title = me.minText;
-                return;
-            }
-            if(value &gt; max) {
-                cell.className = disabledCls;
-                cell.title = me.maxText;
-                return;
-            }
-            if(ddays){
-                if(ddays.indexOf(current.getDay()) != -1){
-                    cell.title = ddaysText;
-                    cell.className = disabledCls;
-                }
-            }
-            if(ddMatch &amp;&amp; format){
-                formatValue = eDate.dateFormat(current, format);
-                if(ddMatch.test(formatValue)){
-                    cell.title = ddText.replace('%0', formatValue);
-                    cell.className = disabledCls;
-                }
-            }
-        };
-
-        for(; i &lt; me.numDays; ++i) {
-            if (i &lt; startingPos) {
-                html = (++prevStart);
-                cls = me.prevCls;
-            } else if (i &gt;= days) {
-                html = (++extraDays);
-                cls = me.nextCls;
-            } else {
-                html = i - startingPos + 1;
-                cls = me.activeCls;
-            }
-            textNodes[i].innerHTML = html;
-            cells[i].className = cls;
-            current.setDate(current.getDate() + 1);
-            setCellClass(cells[i]);
-        }
-
-        me.monthBtn.setText(me.monthNames[date.getMonth()] + ' ' + date.getFullYear());
-    },
-
-<span id='Ext-picker-Date-method-update'>    /**
-</span>     * Update the contents of the picker
-     * @private
-     * @param {Date} date The new date
-     * @param {Boolean} forceRefresh True to force a full refresh
-     */
-    update : function(date, forceRefresh){
-        var me = this,
-            active = me.activeDate;
-
-        if (me.rendered) {
-            me.activeDate = date;
-            if(!forceRefresh &amp;&amp; active &amp;&amp; me.el &amp;&amp; active.getMonth() == date.getMonth() &amp;&amp; active.getFullYear() == date.getFullYear()){
-                me.selectedUpdate(date, active);
-            } else {
-                me.fullUpdate(date, active);
-            }
-        }
-        return me;
-    },
-
-    // private, inherit docs
-    beforeDestroy : function() {
-        var me = this;
-
-        if (me.rendered) {
-            Ext.destroy(
-                me.todayKeyListener,
-                me.keyNav,
-                me.monthPicker,
-                me.monthBtn,
-                me.nextRepeater,
-                me.prevRepeater,
-                me.todayBtn
-            );
-            delete me.textNodes;
-            delete me.cells.elements;
-        }
-    },
-
-    // private, inherit docs
-    onShow: function() {
-        this.callParent(arguments);
-        if (this.focusOnShow) {
-            this.focus();
+        
+        me.callParent(arguments);
+        if (!me.format) {
+            me.format = Ext.Date.defaultFormat;
         }
+        me.renderer = Ext.util.Format.dateRenderer(me.format);
     }
-},
-
-// After dependencies have loaded:
-function() {
-    var proto = this.prototype;
-
-    proto.monthNames = Ext.Date.monthNames;
-
-    proto.dayNames = Ext.Date.dayNames;
-
-    proto.format = Ext.Date.defaultFormat;
-});
-</pre>
+});</pre>
 </body>
 </html>