add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / menu / DatePicker.js

/**\r
 * A menu containing an Ext.picker.Date Component.\r
 *\r
 * Notes:\r
 *\r
 * - Although not listed here, the **constructor** for this class accepts all of the\r
 *   configuration options of **{@link Ext.picker.Date}**.\r
 * - If subclassing DateMenu, any configuration options for the DatePicker must be applied\r
 *   to the **initialConfig** property of the DateMenu. Applying {@link Ext.picker.Date Date Picker}\r
 *   configuration settings to **this** will **not** affect the Date Picker's configuration.\r
 *\r
 * Example:\r
 *\r
 *     @example\r
 *     var dateMenu = Ext.create('Ext.menu.DatePicker', {\r
 *         handler: function(dp, date){\r
 *             Ext.Msg.alert('Date Selected', 'You selected ' + Ext.Date.format(date, 'M j, Y'));\r
 *         }\r
 *     });\r
 *\r
 *     Ext.create('Ext.menu.Menu', {\r
 *         items: [{\r
 *             text: 'Choose a date',\r
 *             menu: dateMenu\r
 *         },{\r
 *             iconCls: 'add16',\r
 *             text: 'Icon item'\r
 *         },{\r
 *             text: 'Regular item'\r
 *         }]\r
 *     }).showAt([5, 5]);\r
 */\r
 Ext.define('Ext.menu.DatePicker', {\r
     extend: 'Ext.menu.Menu',\r
\r
     alias: 'widget.datemenu',\r
\r
     requires: [\r
        'Ext.picker.Date'\r
     ],\r
     \r
    ariaRole: 'dialog',\r
    \r
    //<locale>\r
    /**\r
     * @cfg {String} ariaLabel ARIA label for the Date Picker menu\r
     */\r
    ariaLabel: 'Date picker',\r
    //</locale>\r
\r
    /**\r
     * @cfg {Boolean} hideOnClick\r
     * False to continue showing the menu after a date is selected.\r
     */\r
    hideOnClick: true,\r
\r
    /**\r
     * @cfg {String} pickerId\r
     * An id to assign to the underlying date picker.\r
     */\r
    pickerId: null,\r
    \r
    /**\r
     * @cfg {Object} [pickerCfg] Date picker configuration. This config\r
     * takes priority over {@link #pickerId}.\r
\r
    /**\r
     * @cfg {Number} maxHeight\r
     * @private\r
     */\r
\r
    /**\r
     * @property {Ext.picker.Date} picker\r
     * The {@link Ext.picker.Date} instance for this DateMenu\r
     */\r
    \r
    // DatePicker menu is a special case; Date picker does all key handling\r
    // except the Esc key which is also handled unlike the ordinary menu\r
    enableFocusableContainer: false,\r
\r
    initComponent: function() {\r
        var me = this,\r
            cfg, pickerConfig;\r
            \r
        if (me.pickerCfg) {\r
            pickerConfig = Ext.apply({\r
                cls: Ext.baseCSSPrefix + 'menu-date-item',\r
                margin: 0,\r
                border: false,\r
                id: me.pickerId,\r
                xtype: 'datepicker'\r
            }, me.pickerCfg);\r
        }\r
        else {\r
            // Need to keep this insanity for backwards compat :(\r
            cfg = Ext.apply({}, me.initialConfig);\r
            \r
            // Ensure we clear any listeners so they aren't duplicated\r
            delete cfg.listeners;\r
            \r
            pickerConfig = Ext.applyIf({\r
                cls: Ext.baseCSSPrefix + 'menu-date-item',\r
                margin: 0,\r
                border: false,\r
                id: me.pickerId,\r
                xtype: 'datepicker'\r
            }, cfg);\r
        }\r
        \r
        Ext.apply(me, {\r
            showSeparator: false,\r
            plain: true,\r
            bodyPadding: 0, // remove the body padding from the datepicker menu item so it looks like 3.3\r
            items: [pickerConfig]\r
        });\r
\r
        me.callParent();\r
\r
        me.picker = me.down('datepicker');\r
        \r
        /**\r
         * @event select\r
         * @inheritdoc Ext.picker.Date#select\r
         */\r
        me.relayEvents(me.picker, ['select']);\r
\r
        if (me.hideOnClick) {\r
            me.on('select', me.hidePickerOnSelect, me);\r
        }\r
    },\r
    \r
    onEscapeKey: function(e) {\r
        // Unlike the other menus, DatePicker menu should not close completely on Esc key.\r
        // This is because ordinary menu items will allow using Left arrow key to return\r
        // to the parent menu; however in the Date picker left arrow is used to navigate\r
        // in the calendar. So we use Esc key to return to the parent menu instead.\r
        if (this.floating && this.ownerCmp && this.ownerCmp.focus) {\r
            this.ownerCmp.focus();\r
        }\r
    },\r
\r
    hidePickerOnSelect: function() {\r
        Ext.menu.Manager.hideAll();\r
    }\r
 });\r