-<html>\r
-<head>\r
- <title>The source code</title>\r
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body onload="prettyPrint();">\r
- <pre class="prettyprint lang-js"><div id="cls-Ext.ColorPalette"></div>/**
+<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>
+</head>
+<body onload="prettyPrint();">
+ <pre class="prettyprint lang-js">/*!
+ * Ext JS Library 3.3.1
+ * Copyright(c) 2006-2010 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license
+ */
+<div id="cls-Ext.ColorPalette"></div>/**
* @class Ext.ColorPalette
* @extends Ext.Component
* Simple color palette class for choosing colors. The palette can be rendered to any container.<br />
* @param {Object} config The config object
* @xtype colorpalette
*/
-Ext.ColorPalette = function(config){
- Ext.ColorPalette.superclass.constructor.call(this, config);
- this.addEvents(
- <div id="event-Ext.ColorPalette-select"></div>/**
- * @event select
- * Fires when a color is selected
- * @param {ColorPalette} this
- * @param {String} color The 6-digit color hex code (without the # symbol)
- */
- 'select'
- );
-
- if(this.handler){
- this.on('select', this.handler, this.scope, true);
- }
-};
-Ext.extend(Ext.ColorPalette, Ext.Component, {
+Ext.ColorPalette = Ext.extend(Ext.Component, {
<div id="cfg-Ext.ColorPalette-tpl"></div>/**
* @cfg {String} tpl An existing XTemplate instance to be used in place of the default template for rendering the component.
*/
* the hex codes are case-sensitive.
*/
value : null,
+ <div id="cfg-Ext.ColorPalette-clickEvent"></div>/**
+ * @cfg {String} clickEvent
+ * The DOM event that will cause a color to be selected. This can be any valid event name (dblclick, contextmenu).
+ * Defaults to <tt>'click'</tt>.
+ */
clickEvent :'click',
// private
ctype : 'Ext.ColorPalette',
* The scope (<tt><b>this</b></tt> reference) in which the <code>{@link #handler}</code>
* function will be called. Defaults to this ColorPalette instance.
*/
+
+ // private
+ initComponent : function(){
+ Ext.ColorPalette.superclass.initComponent.call(this);
+ this.addEvents(
+ <div id="event-Ext.ColorPalette-select"></div>/**
+ * @event select
+ * Fires when a color is selected
+ * @param {ColorPalette} this
+ * @param {String} color The 6-digit color hex code (without the # symbol)
+ */
+ 'select'
+ );
+
+ if(this.handler){
+ this.on('select', this.handler, this.scope, true);
+ }
+ },
// private
onRender : function(container, position){
+ this.autoEl = {
+ tag: 'div',
+ cls: this.itemCls
+ };
+ Ext.ColorPalette.superclass.onRender.call(this, container, position);
var t = this.tpl || new Ext.XTemplate(
'<tpl for="."><a href="#" class="color-{.}" hidefocus="on"><em><span style="background:#{.}" unselectable="on"> </span></em></a></tpl>'
);
- var el = document.createElement('div');
- el.id = this.getId();
- el.className = this.itemCls;
- t.overwrite(el, this.colors);
- container.dom.insertBefore(el, position);
- this.el = Ext.get(el);
+ t.overwrite(this.el, this.colors);
this.mon(this.el, this.clickEvent, this.handleClick, this, {delegate: 'a'});
if(this.clickEvent != 'click'){
this.mon(this.el, 'click', Ext.emptyFn, this, {delegate: 'a', preventDefault: true});
if(this.value){
var s = this.value;
this.value = null;
- this.select(s);
+ this.select(s, true);
}
},
<div id="method-Ext.ColorPalette-select"></div>/**
* Selects the specified color in the palette (fires the {@link #select} event)
* @param {String} color A valid 6-digit color hex code (# will be stripped if included)
+ * @param {Boolean} suppressEvent (optional) True to stop the select event from firing. Defaults to <tt>false</tt>.
*/
- select : function(color){
+ select : function(color, suppressEvent){
color = color.replace('#', '');
if(color != this.value || this.allowReselect){
var el = this.el;
}
el.child('a.color-'+color).addClass('x-color-palette-sel');
this.value = color;
- this.fireEvent('select', this, color);
+ if(suppressEvent !== true){
+ this.fireEvent('select', this, color);
+ }
}
}
* @cfg {String} autoEl @hide
*/
});
-Ext.reg('colorpalette', Ext.ColorPalette);
-</pre> \r
-</body>\r
+Ext.reg('colorpalette', Ext.ColorPalette);</pre>
+</body>
</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff