123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129 |
- <!DOCTYPE html>
- <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>
- <style type="text/css">
- .highlight { display: block; background-color: #ddd; }
- </style>
- <script type="text/javascript">
- function highlight() {
- document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
- }
- </script>
- </head>
- <body onload="prettyPrint(); highlight();">
- <pre class="prettyprint lang-js"><span id='Ext-menu-ColorPicker'>/**
- </span> * A menu containing a Ext.picker.Color Component.
- *
- * Notes:
- *
- * - Although not listed here, the **constructor** for this class accepts all of the
- * configuration options of {@link Ext.picker.Color}.
- * - If subclassing ColorMenu, any configuration options for the ColorPicker must be
- * applied to the **initialConfig** property of the ColorMenu. Applying
- * {@link Ext.picker.Color ColorPicker} configuration settings to `this` will **not**
- * affect the ColorPicker's configuration.
- *
- * Example:
- *
- * @example
- * var colorPicker = Ext.create('Ext.menu.ColorPicker', {
- * value: '000000'
- * });
- *
- * Ext.create('Ext.menu.Menu', {
- * width: 100,
- * height: 90,
- * floating: false, // usually you want this set to True (default)
- * renderTo: Ext.getBody(), // usually rendered by it's containing component
- * items: [{
- * text: 'choose a color',
- * menu: colorPicker
- * },{
- * iconCls: 'add16',
- * text: 'icon item'
- * },{
- * text: 'regular item'
- * }]
- * });
- */
- Ext.define('Ext.menu.ColorPicker', {
- extend: 'Ext.menu.Menu',
- alias: 'widget.colormenu',
- requires: [
- 'Ext.picker.Color'
- ],
- <span id='Ext-menu-ColorPicker-cfg-hideOnClick'> /**
- </span> * @cfg {Boolean} hideOnClick
- * False to continue showing the menu after a date is selected.
- */
- hideOnClick : true,
- <span id='Ext-menu-ColorPicker-cfg-pickerId'> /**
- </span> * @cfg {String} pickerId
- * An id to assign to the underlying color picker.
- */
- pickerId : null,
- <span id='Ext-menu-ColorPicker-cfg-maxHeight'> /**
- </span> * @cfg {Number} maxHeight
- * @private
- */
- <span id='Ext-menu-ColorPicker-property-picker'> /**
- </span> * @property {Ext.picker.Color} picker
- * The {@link Ext.picker.Color} instance for this ColorMenu
- */
- <span id='Ext-menu-ColorPicker-event-click'> /**
- </span> * @event click
- * @private
- */
- initComponent : function(){
- var me = this,
- cfg = Ext.apply({}, me.initialConfig);
- // Ensure we don't get duplicate listeners
- delete cfg.listeners;
- Ext.apply(me, {
- plain: true,
- showSeparator: false,
- items: Ext.applyIf({
- cls: Ext.baseCSSPrefix + 'menu-color-item',
- id: me.pickerId,
- xtype: 'colorpicker'
- }, cfg)
- });
- me.callParent(arguments);
- me.picker = me.down('colorpicker');
- <span id='Ext-menu-ColorPicker-event-select'> /**
- </span> * @event select
- * @inheritdoc Ext.picker.Color#select
- */
- me.relayEvents(me.picker, ['select']);
- if (me.hideOnClick) {
- me.on('select', me.hidePickerOnSelect, me);
- }
- },
- <span id='Ext-menu-ColorPicker-method-hidePickerOnSelect'> /**
- </span> * Hides picker on select if hideOnClick is true
- * @private
- */
- hidePickerOnSelect: function() {
- Ext.menu.Manager.hideAll();
- }
- });</pre>
- </body>
- </html>
|