X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6746dc89c47ed01b165cc1152533605f97eb8e8d..f562e4c6e5fac7bcb445985b99acbea4d706e6f0:/src/picker/Color.js?ds=inline diff --git a/src/picker/Color.js b/src/picker/Color.js index 853c0afc..399e7bba 100644 --- a/src/picker/Color.js +++ b/src/picker/Color.js @@ -13,80 +13,76 @@ If you are unsure which license is appropriate for your use, please contact the */ /** - * @class Ext.picker.Color - * @extends Ext.Component - *
ColorPicker provides a simple color palette for choosing colors. The picker can be rendered to any container. - * The available default to a standard 40-color palette; this can be customized with the {@link #colors} config.
- *Typically you will need to implement a handler function to be notified when the user chooses a color from the - * picker; you can register the handler using the {@link #select} event, or by implementing the {@link #handler} - * method.
- *Here's an example of typical usage:
- *var cp = new Ext.picker.Color({
- value: '993300', // initial selected color
- renderTo: 'my-div'
-});
-
-cp.on('select', function(picker, selColor){
- // do something with selColor
-});
-
- * {@img Ext.picker.Color/Ext.picker.Color.png Ext.picker.Color component}
+ * Color picker provides a simple color palette for choosing colors. The picker can be rendered to any container. The
+ * available default to a standard 40-color palette; this can be customized with the {@link #colors} config.
+ *
+ * Typically you will need to implement a handler function to be notified when the user chooses a color from the picker;
+ * you can register the handler using the {@link #select} event, or by implementing the {@link #handler} method.
*
+ * @example
+ * Ext.create('Ext.picker.Color', {
+ * value: '993300', // initial selected color
+ * renderTo: Ext.getBody(),
+ * listeners: {
+ * select: function(picker, selColor) {
+ * alert(selColor);
+ * }
+ * }
+ * });
*/
Ext.define('Ext.picker.Color', {
extend: 'Ext.Component',
requires: 'Ext.XTemplate',
alias: 'widget.colorpicker',
alternateClassName: 'Ext.ColorPalette',
-
+
/**
- * @cfg {String} componentCls
- * The CSS class to apply to the containing element (defaults to 'x-color-picker')
+ * @cfg {String} [componentCls='x-color-picker']
+ * The CSS class to apply to the containing element.
*/
componentCls : Ext.baseCSSPrefix + 'color-picker',
-
+
/**
- * @cfg {String} selectedCls
+ * @cfg {String} [selectedCls='x-color-picker-selected']
* The CSS class to apply to the selected element
*/
selectedCls: Ext.baseCSSPrefix + 'color-picker-selected',
-
+
/**
* @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.
+ * 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,
-
+
/**
* @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',
/**
- * @cfg {Boolean} allowReselect If set to true then reselecting a color that is already selected fires the {@link #select} event
+ * @cfg {Boolean} allowReselect
+ * If set to true then reselecting a color that is already selected fires the {@link #select} event
*/
allowReselect : false,
/**
- * An array of 6-digit color hex code strings (without the # symbol). This array can contain any number - * of colors, and each hex code should be unique. The width of the picker is controlled via CSS by adjusting - * the width property of the 'x-color-picker' class (or assigning a custom class), so you can balance the number - * of colors with the width setting until the box is symmetrical.
- *You can override individual colors if needed:
- *
-var cp = new Ext.picker.Color();
-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.picker.Color();
-cp.colors = ['000000', '993300', '333300'];
-
- * @type Array
+ * @property {String[]} colors
+ * An array of 6-digit color hex code strings (without the # symbol). This array can contain any number of colors,
+ * and each hex code should be unique. The width of the picker is controlled via CSS by adjusting the width property
+ * of the 'x-color-picker' class (or assigning a custom class), so you can balance the number of colors with the
+ * width setting until the box is symmetrical.
+ *
+ * You can override individual colors if needed:
+ *
+ * var cp = new Ext.picker.Color();
+ * 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.picker.Color();
+ * cp.colors = ['000000', '993300', '333300'];
*/
colors : [
'000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333',
@@ -98,30 +94,38 @@ cp.colors = ['000000', '993300', '333300'];
/**
* @cfg {Function} handler
- * Optional. A function that will handle the select event of this picker.
- * The handler is passed the following parameters:picker
: ColorPickercolor
: String{@link #handler}
- * function will be called. Defaults to this ColorPicker instance.
+ * The scope (`this` reference) in which the `{@link #handler}` function will be called. Defaults to this
+ * Color picker instance.
*/
-
+
colorRe: /(?:^|\s)color-(.{6})(?:\s|$)/,
- constructor: function() {
- this.renderTpl = Ext.create('Ext.XTemplate', '