docs/source/ColorPicker.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-menu-ColorPicker'>/**
  19 </span> * A menu containing a Ext.picker.Color Component.
  20  *
  21  * Notes:
  22  *
  23  *   - Although not listed here, the **constructor** for this class accepts all of the
  24  *     configuration options of {@link Ext.picker.Color}.
  25  *   - If subclassing ColorMenu, any configuration options for the ColorPicker must be
  26  *     applied to the **initialConfig** property of the ColorMenu. Applying
  27  *     {@link Ext.picker.Color ColorPicker} configuration settings to `this` will **not**
  28  *     affect the ColorPicker's configuration.
  29  *
  30  * Example:
  31  *
  32  *     @example
  33  *     var colorPicker = Ext.create('Ext.menu.ColorPicker', {
  34  *         value: '000000'
  35  *     });
  36  *
  37  *     Ext.create('Ext.menu.Menu', {
  38  *         width: 100,
  39  *         height: 90,
  40  *         floating: false,  // usually you want this set to True (default)
  41  *         renderTo: Ext.getBody(),  // usually rendered by it's containing component
  42  *         items: [{
  43  *             text: 'choose a color',
  44  *             menu: colorPicker
  45  *         },{
  46  *             iconCls: 'add16',
  47  *             text: 'icon item'
  48  *         },{
  49  *             text: 'regular item'
  50  *         }]
  51  *     });
  52  */
  53  Ext.define('Ext.menu.ColorPicker', {
  54      extend: 'Ext.menu.Menu',
  55
  56      alias: 'widget.colormenu',
  57
  58      requires: [
  59         'Ext.picker.Color'
  60      ],
  61
  62 <span id='Ext-menu-ColorPicker-cfg-hideOnClick'>    /**
  63 </span>     * @cfg {Boolean} hideOnClick
  64      * False to continue showing the menu after a date is selected.
  65      */
  66     hideOnClick : true,
  67
  68 <span id='Ext-menu-ColorPicker-cfg-pickerId'>    /**
  69 </span>     * @cfg {String} pickerId
  70      * An id to assign to the underlying color picker.
  71      */
  72     pickerId : null,
  73
  74 <span id='Ext-menu-ColorPicker-cfg-maxHeight'>    /**
  75 </span>     * @cfg {Number} maxHeight
  76      * @hide
  77      */
  78
  79 <span id='Ext-menu-ColorPicker-property-picker'>    /**
  80 </span>     * @property {Ext.picker.Color} picker
  81      * The {@link Ext.picker.Color} instance for this ColorMenu
  82      */
  83
  84 <span id='Ext-menu-ColorPicker-event-click'>    /**
  85 </span>     * @event click
  86      * @hide
  87      */
  88
  89 <span id='Ext-menu-ColorPicker-event-itemclick'>    /**
  90 </span>     * @event itemclick
  91      * @hide
  92      */
  93
  94     initComponent : function(){
  95         var me = this,
  96             cfg = Ext.apply({}, me.initialConfig);
  97
  98         // Ensure we don't get duplicate listeners
  99         delete cfg.listeners;
 100         Ext.apply(me, {
 101             plain: true,
 102             showSeparator: false,
 103             items: Ext.applyIf({
 104                 cls: Ext.baseCSSPrefix + 'menu-color-item',
 105                 id: me.pickerId,
 106                 xtype: 'colorpicker'
 107             }, cfg)
 108         });
 109
 110         me.callParent(arguments);
 111
 112         me.picker = me.down('colorpicker');
 113
 114 <span id='Ext-menu-ColorPicker-event-select'>        /**
 115 </span>         * @event select
 116          * @alias Ext.picker.Color#select
 117          */
 118         me.relayEvents(me.picker, ['select']);
 119
 120         if (me.hideOnClick) {
 121             me.on('select', me.hidePickerOnSelect, me);
 122         }
 123     },
 124
 125 <span id='Ext-menu-ColorPicker-method-hidePickerOnSelect'>    /**
 126 </span>     * Hides picker on select if hideOnClick is true
 127      * @private
 128      */
 129     hidePickerOnSelect: function() {
 130         Ext.menu.Manager.hideAll();
 131     }
 132  });</pre>
 133 </body>
 134 </html>