X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..6b044c28b5f26fb99c86c237ffad19741c0f7f3d:/src/widgets/ColorPalette.js?ds=inline diff --git a/src/widgets/ColorPalette.js b/src/widgets/ColorPalette.js index 2ad34111..9dcf6817 100644 --- a/src/widgets/ColorPalette.js +++ b/src/widgets/ColorPalette.js @@ -1,8 +1,8 @@ /*! - * Ext JS Library 3.0.0 - * Copyright(c) 2006-2009 Ext JS, LLC - * licensing@extjs.com - * http://www.extjs.com/license + * Ext JS Library 3.3.1 + * Copyright(c) 2006-2010 Sencha Inc. + * licensing@sencha.com + * http://www.sencha.com/license */ /** * @class Ext.ColorPalette @@ -22,40 +22,29 @@ cp.on('select', function(palette, selColor){ * @param {Object} config The config object * @xtype colorpalette */ -Ext.ColorPalette = function(config){ - Ext.ColorPalette.superclass.constructor.call(this, config); - this.addEvents( - /** - * @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, { /** * @cfg {String} tpl An existing XTemplate instance to be used in place of the default template for rendering the component. */ /** * @cfg {String} itemCls - * The CSS class to apply to the containing element (defaults to "x-color-palette") + * The CSS class to apply to the containing element (defaults to 'x-color-palette') */ - itemCls : "x-color-palette", + itemCls : 'x-color-palette', /** * @cfg {String} value * The initial color to highlight (should be a valid 6-digit color hex code without the # symbol). Note that * the hex codes are case-sensitive. */ value : null, - clickEvent:'click', + /** + * @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 'click'. + */ + clickEvent :'click', // private - ctype: "Ext.ColorPalette", + ctype : 'Ext.ColorPalette', /** * @cfg {Boolean} allowReselect If set to true then reselecting a color that is already selected fires the {@link #select} event @@ -70,35 +59,67 @@ Ext.extend(Ext.ColorPalette, Ext.Component, { *
You can override individual colors if needed:
*
var cp = new Ext.ColorPalette();
-cp.colors[0] = "FF0000"; // change the first box to red
+cp.colors[0] = 'FF0000'; // change the first box to red
Or you can provide a custom array of your own for complete control:
var cp = new Ext.ColorPalette();
-cp.colors = ["000000", "993300", "333300"];
+cp.colors = ['000000', '993300', '333300'];
* @type Array
*/
colors : [
- "000000", "993300", "333300", "003300", "003366", "000080", "333399", "333333",
- "800000", "FF6600", "808000", "008000", "008080", "0000FF", "666699", "808080",
- "FF0000", "FF9900", "99CC00", "339966", "33CCCC", "3366FF", "800080", "969696",
- "FF00FF", "FFCC00", "FFFF00", "00FF00", "00FFFF", "00CCFF", "993366", "C0C0C0",
- "FF99CC", "FFCC99", "FFFF99", "CCFFCC", "CCFFFF", "99CCFF", "CC99FF", "FFFFFF"
+ '000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333',
+ '800000', 'FF6600', '808000', '008000', '008080', '0000FF', '666699', '808080',
+ 'FF0000', 'FF9900', '99CC00', '339966', '33CCCC', '3366FF', '800080', '969696',
+ 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0',
+ 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF'
],
+ /**
+ * @cfg {Function} handler
+ * Optional. A function that will handle the select event of this palette.
+ * The handler is passed the following parameters:palette
: ColorPalettecolor
: String{@link #handler}
+ * function will be called. Defaults to this ColorPalette instance.
+ */
+
+ // private
+ initComponent : function(){
+ Ext.ColorPalette.superclass.initComponent.call(this);
+ this.addEvents(
+ /**
+ * @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(
'