ColorPicker.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  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. alias: 'widget.colormenu',
  56. requires: [
  57. 'Ext.picker.Color'
  58. ],
  59. <span id='Ext-menu-ColorPicker-cfg-hideOnClick'> /**
  60. </span> * @cfg {Boolean} hideOnClick
  61. * False to continue showing the menu after a date is selected.
  62. */
  63. hideOnClick : true,
  64. <span id='Ext-menu-ColorPicker-cfg-pickerId'> /**
  65. </span> * @cfg {String} pickerId
  66. * An id to assign to the underlying color picker.
  67. */
  68. pickerId : null,
  69. <span id='Ext-menu-ColorPicker-cfg-maxHeight'> /**
  70. </span> * @cfg {Number} maxHeight
  71. * @private
  72. */
  73. <span id='Ext-menu-ColorPicker-property-picker'> /**
  74. </span> * @property {Ext.picker.Color} picker
  75. * The {@link Ext.picker.Color} instance for this ColorMenu
  76. */
  77. <span id='Ext-menu-ColorPicker-event-click'> /**
  78. </span> * @event click
  79. * @private
  80. */
  81. initComponent : function(){
  82. var me = this,
  83. cfg = Ext.apply({}, me.initialConfig);
  84. // Ensure we don't get duplicate listeners
  85. delete cfg.listeners;
  86. Ext.apply(me, {
  87. plain: true,
  88. showSeparator: false,
  89. items: Ext.applyIf({
  90. cls: Ext.baseCSSPrefix + 'menu-color-item',
  91. id: me.pickerId,
  92. xtype: 'colorpicker'
  93. }, cfg)
  94. });
  95. me.callParent(arguments);
  96. me.picker = me.down('colorpicker');
  97. <span id='Ext-menu-ColorPicker-event-select'> /**
  98. </span> * @event select
  99. * @inheritdoc Ext.picker.Color#select
  100. */
  101. me.relayEvents(me.picker, ['select']);
  102. if (me.hideOnClick) {
  103. me.on('select', me.hidePickerOnSelect, me);
  104. }
  105. },
  106. <span id='Ext-menu-ColorPicker-method-hidePickerOnSelect'> /**
  107. </span> * Hides picker on select if hideOnClick is true
  108. * @private
  109. */
  110. hidePickerOnSelect: function() {
  111. Ext.menu.Manager.hideAll();
  112. }
  113. });</pre>
  114. </body>
  115. </html>