From 3733760a8375f5639978ce24ed799c5fe30c42b0 Mon Sep 17 00:00:00 2001 From: Tim de Koning Date: Wed, 18 Jan 2012 18:25:31 +0100 Subject: [PATCH 1/3] Fix for bug where unfocus of HEX / RGB fields caused color value to change... --- .../src/ux/colorpicker/ColorPicker.js | 212 ++++++++---------- 1 file changed, 94 insertions(+), 118 deletions(-) diff --git a/Ext.ux.ColorPicker/src/ux/colorpicker/ColorPicker.js b/Ext.ux.ColorPicker/src/ux/colorpicker/ColorPicker.js index 0470ca2..93aa3e6 100644 --- a/Ext.ux.ColorPicker/src/ux/colorpicker/ColorPicker.js +++ b/Ext.ux.ColorPicker/src/ux/colorpicker/ColorPicker.js @@ -7,7 +7,7 @@ * @param {Object} * config Configuration options * @version 1.0.0 - * + * */ Ext.define('Ext.ux.colorpicker.ColorPicker', { @@ -212,16 +212,13 @@ Ext.define('Ext.ux.colorpicker.ColorPicker', { }, websafeClick : function() { - var me = this, rgb = me.websafe(this.getColor()); - me.updateMode = 'click'; - me.setColor(me.rgbToHex(rgb)); + this.setColor(this.rgbToHex(this.websafe(this.getColor()))); }, inverseClick : function() { - var me = this, rgb = me.invert(this.getColor()); - me.updateMode = 'click'; - me.setColor(me.rgbToHex(rgb)); + this.setColor(this.invert(this.getColor())); }, + selectClick : function() { var me = this, color; color = me.down('#cSelect').getEl().getColor('backgroundColor', '', ''); @@ -229,8 +226,7 @@ Ext.define('Ext.ux.colorpicker.ColorPicker', { }, getColor : function() { - var me = this, hsv = me.getHsv(); - return me.hsvToRgb(hsv.h, hsv.s, hsv.v); + return me.hsvToRgb(this.getHsv()); }, setValue : function(v) { @@ -254,37 +250,23 @@ Ext.define('Ext.ux.colorpicker.ColorPicker', { }, rgbChange : function(input) { - var me = this, temp = me.rgbToHsv(me.down('#iRed').getValue(), me.down('#iGreen').getValue(), me.down('#iBlue').getValue()); - - me.updateMode = 'rgb'; - me.setHsv({ - h : temp[0], - s : temp[1], - v : temp[2] + this.updateColor({ + r: this.down('#iRed').getValue(), + g: this.down('#iGreen').getValue(), + b: this.down('#iBlue').getValue() }); - me.updateColor(); }, hsvChange : function(input) { - var me = this; - me.updateMode = 'hsv'; - me.setHsv({ - h : me.down('#iHue').getValue(), - s : me.down('#iSat').getValue() / 100, - v : me.down('#iVal').getValue() / 100 + this.updateColor({ + h : this.down('#iHue').getValue(), + s : this.down('#iSat').getValue() / 100, + v : this.down('#iVal').getValue() / 100 }); - me.updateColor(); }, hexaChange : function(input) { - var me = this, temp = me.rgbToHsv(me.hexToRgb(me.down('#iHexa').getValue())); - me.updateMode = 'hexa'; - me.setHsv({ - h : temp[0], - s : temp[1], - v : temp[2] - }); - me.updateColor(); + this.updateColor(this.hexToRgb(this.down('#iHexa').getValue())); }, hueClick : function(event, el) { @@ -300,18 +282,16 @@ Ext.define('Ext.ux.colorpicker.ColorPicker', { }, moveHuePicker : function(y) { - var me = this, hsv = me.getHsv(), hp = me.down('#huePicker').getEl(); + var hsv = this.getHsv(), hp = this.down('#huePicker').getEl(); hsv.h = Math.round(360 / 181 * (181 - y)); - hp.moveTo(hp.getLeft(), me.down('#cHue').getEl().getTop() + y - 7, true); - me.updateRgbPicker(hsv.h); - me.updateColor(); + hp.moveTo(hp.getLeft(), this.down('#cHue').getEl().getTop() + y - 7, true); + this.updateRgbPicker(hsv.h); + this.updateColor(hsv); }, updateRgbPicker : function(newValue) { - var me = this; - me.updateMode = 'click'; - me.down('#cRgb').getEl().applyStyles({ - 'backgroundColor' : '#' + me.rgbToHex(me.hsvToRgb(newValue, 1, 1)) + this.down('#cRgb').getEl().applyStyles({ + 'backgroundColor' : '#' + this.rgbToHex(this.hsvToRgb({ h: newValue, s:1, v:1 })) }); }, @@ -323,36 +303,35 @@ Ext.define('Ext.ux.colorpicker.ColorPicker', { me.updateColor(); }, - updateColor : function() { - var me = this, hsv = me.getHsv(); - var rgb = me.hsvToRgb(hsv.h, hsv.s, hsv.v); - var invert = me.invert(rgb); - var websafe = me.websafe(rgb); - var wsInvert = me.invert(websafe); - - if (me.updateMode != 'hexa') { - me.down('#iHexa').setValue(me.rgbToHex(rgb)); - } - if (me.updateMode != 'rgb') { - me.down('#iRed').setValue(rgb[0]); - me.down('#iGreen').setValue(rgb[1]); - me.down('#iBlue').setValue(rgb[2]); + updateColor : function(color) { + var rgb, hsv, invert, websafe; + color = (Ext.isEmpty(color) ? this.getHsv() : color); + if (Ext.isEmpty(color.h)) { + rgb = color; + hsv = this.rgbToHsv(rgb); + } else { + hsv = color; + rgb = this.hsvToRgb(hsv); } - if (me.updateMode != 'hsv') { - me.down('#iHue').setValue(Math.round(hsv.h)); - me.down('#iSat').setValue(Math.round(hsv.s * 100)); - me.down('#iVal').setValue(Math.round(hsv.v * 100)); - } - - me.setButtonColor('#cWebsafe', websafe); - me.setButtonColor('#cInverse', invert); - me.setButtonColor('#cSelect', rgb); - - if (me.updateMode != 'click') { - var cRgb = me.down('#cRgb').getEl(), cHue = me.down('#cHue').getEl(), hp = me.down('#huePicker').getEl(); - hp.moveTo(hp.getLeft(), cHue.getTop() + me.getHPos(me.down('#iHue').getValue()) - 7, true); - me.down('#rgbPicker').getEl().moveTo(cRgb.getLeft() + me.getSPos(me.down('#iSat').getValue() / 100) - 7, - cHue.getTop() + me.getVPos(me.down('#iVal').getValue() / 100) - 7, true); + invert = this.invert(rgb); + websafe = this.websafe(rgb); + + this.down('#iHexa').setValue(this.rgbToHex(rgb)); + this.down('#iRed').setValue(rgb.r); + this.down('#iGreen').setValue(rgb.g); + this.down('#iBlue').setValue(rgb.b); + this.down('#iHue').setValue(Math.round(hsv.h)); + this.down('#iSat').setValue(Math.round(hsv.s * 100)); + this.down('#iVal').setValue(Math.round(hsv.v * 100)); + this.setButtonColor('#cWebsafe', websafe); + this.setButtonColor('#cInverse', invert); + this.setButtonColor('#cSelect', rgb); + + if (this.updateMode != 'click') { + var cRgb = this.down('#cRgb').getEl(), cHue = this.down('#cHue').getEl(), hp = this.down('#huePicker').getEl(); + hp.moveTo(hp.getLeft(), cHue.getTop() + this.getHPos(this.down('#iHue').getValue()) - 7, true); + this.down('#rgbPicker').getEl().moveTo(cRgb.getLeft() + this.getSPos(this.down('#iSat').getValue() / 100) - 7, + cHue.getTop() + this.getVPos(this.down('#iVal').getValue() / 100) - 7, true); } }, @@ -364,7 +343,7 @@ Ext.define('Ext.ux.colorpicker.ColorPicker', { }, /** * Convert X coordinate to Saturation value - * + * * @private * @param {Integer} * x @@ -376,7 +355,7 @@ Ext.define('Ext.ux.colorpicker.ColorPicker', { /** * Convert Y coordinate to Brightness value - * + * * @private * @param {Integer} * y @@ -386,55 +365,55 @@ Ext.define('Ext.ux.colorpicker.ColorPicker', { return (181 - y) / 181; }, - hsvToRgb : function(h, s, v) { - if (h instanceof Array) { - return this.hsvToRgb.call(this, h[0], h[1], h[2]); - } + hsvToRgb : function(hsv) { var r, g, b, i, f, p, q, t; - i = Math.floor((h / 60) % 6); - f = (h / 60) - i; - p = v * (1 - s); - q = v * (1 - f * s); - t = v * (1 - (1 - f) * s); + i = Math.floor((hsv.h / 60) % 6); + f = (hsv.h / 60) - i; + p = hsv.v * (1 - hsv.s); + q = hsv.v * (1 - f * hsv.s); + t = hsv.v * (1 - (1 - f) * hsv.s); switch (i) { case 0: - r = v, g = t, b = p; + r = hsv.v, g = t, b = p; break; case 1: - r = q, g = v, b = p; + r = q, g = hsv.v, b = p; break; case 2: - r = p, g = v, b = t; + r = p, g = hsv.v, b = t; break; case 3: - r = p, g = q, b = v; + r = p, g = q, b = hsv.v; break; case 4: - r = t, g = p, b = v; + r = t, g = p, b = hsv.v; break; case 5: - r = v, g = p, b = q; + r = hsv.v, g = p, b = q; break; } - return [ this.realToDec(r), this.realToDec(g), this.realToDec(b) ]; + return { + r: this.realToDec(r), + g: this.realToDec(g), + b: this.realToDec(b) + }; }, /** * Convert a float to decimal - * + * * @param {Float} - * n * @return {Integer} */ realToDec : function(n) { return Math.min(255, Math.round(n * 256)); }, - websafe : function(r, g, b) { - var me = this; - if (r instanceof Array) { - return me.websafe.call(me, r[0], r[1], r[2]); + websafe : function(rgb) { + return { + r: this.checkSafeNumber(rgb.r), + g: this.checkSafeNumber(rgb.g), + b: this.checkSafeNumber(rgb.b) } - return [ me.checkSafeNumber(r), me.checkSafeNumber(g), me.checkSafeNumber(b) ]; }, checkSafeNumber : function(v) { @@ -451,11 +430,12 @@ Ext.define('Ext.ux.colorpicker.ColorPicker', { return v; }, - invert : function(r, g, b) { - if (r instanceof Array) { - return this.invert.call(this, r[0], r[1], r[2]); - } - return [ 255 - r, 255 - g, 255 - b ]; + invert : function(rgb) { + return { + r: (255 - rgb.r), + g: (255 - rgb.g), + b: (255 - rgb.b) + }; }, getSPos : function(saturation) { @@ -471,20 +451,15 @@ Ext.define('Ext.ux.colorpicker.ColorPicker', { }, hexToRgb : function(hex) { - var r, g, b; - r = parseInt(hex.substring(0, 2), 16); - g = parseInt(hex.substring(2, 4), 16); - b = parseInt(hex.substring(4, 6), 16); - - return [ r, g, b ]; + return { + r: parseInt(hex.substring(0, 2), 16), + g: parseInt(hex.substring(2, 4), 16), + b: parseInt(hex.substring(4, 6), 16) + } }, - rgbToHex : function(r, g, b) { - var me = this; - if (r instanceof Array) - return me.rgbToHex.call(me, r[0], r[1], r[2]); - - return me.toHex(r) + me.toHex(g) + me.toHex(b); + rgbToHex : function(rgb) { + return this.toHex(rgb.r) + this.toHex(rgb.g) + this.toHex(rgb.b); }, toHex : function(n) { @@ -495,11 +470,8 @@ Ext.define('Ext.ux.colorpicker.ColorPicker', { return "0123456789ABCDEF".charAt((n - n % 16) / 16) + "0123456789ABCDEF".charAt(n % 16); }, - rgbToHsv : function(r, g, b) { - if (r instanceof Array) - return this.rgbToHsv.call(this, r[0], r[1], r[2]); - - r = r / 255, g = g / 255, b = b / 255; + rgbToHsv : function(rgb) { + r = rgb.r / 255, g = rgb.g / 255, b = rgb.b / 255; var max = Math.max(r, g, b), min = Math.min(r, g, b); var h, s, v = max; @@ -523,6 +495,10 @@ Ext.define('Ext.ux.colorpicker.ColorPicker', { h /= 6; } - return [ h, s, v ]; + return { + h: h, + s: s, + v: v + }; } -}); \ No newline at end of file +}); From e8607016840cc9f564edbabf5ff33edc86fdb647 Mon Sep 17 00:00:00 2001 From: Tim de Koning Date: Wed, 18 Jan 2012 19:54:33 +0100 Subject: [PATCH 2/3] Fixed bug where RGB2HSV and HSV2RGB where inconsistent: sometimes HSV values were return as 0.31, 0.12, 0.11 and sometimes they where returned as 131, 32, 11. Besides: the values seemed a bit off.... Implemented new RGB2HSV and HSV2RGB logic and standardized the use... --- .../src/ux/colorpicker/ColorPicker.js | 153 +++++++++--------- 1 file changed, 74 insertions(+), 79 deletions(-) diff --git a/Ext.ux.ColorPicker/src/ux/colorpicker/ColorPicker.js b/Ext.ux.ColorPicker/src/ux/colorpicker/ColorPicker.js index 93aa3e6..2128d44 100644 --- a/Ext.ux.ColorPicker/src/ux/colorpicker/ColorPicker.js +++ b/Ext.ux.ColorPicker/src/ux/colorpicker/ColorPicker.js @@ -216,7 +216,7 @@ Ext.define('Ext.ux.colorpicker.ColorPicker', { }, inverseClick : function() { - this.setColor(this.invert(this.getColor())); + this.setColor(this.rgbToHex(this.invert(this.getColor()))); }, selectClick : function() { @@ -226,7 +226,8 @@ Ext.define('Ext.ux.colorpicker.ColorPicker', { }, getColor : function() { - return me.hsvToRgb(this.getHsv()); + var me = this, hsv = me.getHsv(); + return me.hsvToRgb(hsv); }, setValue : function(v) { @@ -260,8 +261,8 @@ Ext.define('Ext.ux.colorpicker.ColorPicker', { hsvChange : function(input) { this.updateColor({ h : this.down('#iHue').getValue(), - s : this.down('#iSat').getValue() / 100, - v : this.down('#iVal').getValue() / 100 + s : this.down('#iSat').getValue(), + v : this.down('#iVal').getValue() }); }, @@ -270,14 +271,11 @@ Ext.define('Ext.ux.colorpicker.ColorPicker', { }, hueClick : function(event, el) { - var me = this; - me.updateMode = 'click'; - me.moveHuePicker(event.getXY()[1] - me.down('#cHue').getEl().getTop()); + this.moveHuePicker(event.getXY()[1] - this.down('#cHue').getEl().getTop()); }, rgbClick : function(event, el) { var me = this, cRgb = me.down('#cRgb').getEl(); - me.updateMode = 'click'; me.moveRgbPicker(event.getXY()[0] - cRgb.getLeft(), event.getXY()[1] - cRgb.getTop()); }, @@ -285,26 +283,27 @@ Ext.define('Ext.ux.colorpicker.ColorPicker', { var hsv = this.getHsv(), hp = this.down('#huePicker').getEl(); hsv.h = Math.round(360 / 181 * (181 - y)); hp.moveTo(hp.getLeft(), this.down('#cHue').getEl().getTop() + y - 7, true); - this.updateRgbPicker(hsv.h); this.updateColor(hsv); }, updateRgbPicker : function(newValue) { this.down('#cRgb').getEl().applyStyles({ - 'backgroundColor' : '#' + this.rgbToHex(this.hsvToRgb({ h: newValue, s:1, v:1 })) + 'backgroundColor' : '#' + this.rgbToHex(this.hsvToRgb({ h: newValue, s:100, v:100 })) }); }, moveRgbPicker : function(x, y) { - var me = this, hsv = me.getHsv(), cRgb = me.down('#cRgb').getEl(); - hsv.s = me.getSaturation(x); - hsv.v = me.getVal(y); - me.down('#rgbPicker').getEl().moveTo(cRgb.getLeft() + x - 7, cRgb.getTop() + y - 7, true); - me.updateColor(); + var hsv = this.getHsv(), cRgb = this.down('#cRgb').getEl(); + hsv.s = this.getSaturation(x) * 100; + hsv.v = this.getVal(y) * 100; + this.down('#rgbPicker').getEl().moveTo(cRgb.getLeft() + x - 7, cRgb.getTop() + y - 7, true); + this.updateColor(); }, updateColor : function(color) { - var rgb, hsv, invert, websafe; + var cRgb = this.down('#cRgb').getEl(), cHue = this.down('#cHue').getEl(), hp = this.down('#huePicker').getEl(), + rgb, hsv, invert, websafe; + color = (Ext.isEmpty(color) ? this.getHsv() : color); if (Ext.isEmpty(color.h)) { rgb = color; @@ -315,24 +314,22 @@ Ext.define('Ext.ux.colorpicker.ColorPicker', { } invert = this.invert(rgb); websafe = this.websafe(rgb); - + this.hsv = hsv; + this.updateRgbPicker(hsv.h); this.down('#iHexa').setValue(this.rgbToHex(rgb)); this.down('#iRed').setValue(rgb.r); this.down('#iGreen').setValue(rgb.g); this.down('#iBlue').setValue(rgb.b); this.down('#iHue').setValue(Math.round(hsv.h)); - this.down('#iSat').setValue(Math.round(hsv.s * 100)); - this.down('#iVal').setValue(Math.round(hsv.v * 100)); + this.down('#iSat').setValue(Math.round(hsv.s)); + this.down('#iVal').setValue(Math.round(hsv.v)); this.setButtonColor('#cWebsafe', websafe); this.setButtonColor('#cInverse', invert); this.setButtonColor('#cSelect', rgb); - if (this.updateMode != 'click') { - var cRgb = this.down('#cRgb').getEl(), cHue = this.down('#cHue').getEl(), hp = this.down('#huePicker').getEl(); - hp.moveTo(hp.getLeft(), cHue.getTop() + this.getHPos(this.down('#iHue').getValue()) - 7, true); - this.down('#rgbPicker').getEl().moveTo(cRgb.getLeft() + this.getSPos(this.down('#iSat').getValue() / 100) - 7, - cHue.getTop() + this.getVPos(this.down('#iVal').getValue() / 100) - 7, true); - } + hp.moveTo(hp.getLeft(), cHue.getTop() + this.getHPos(this.down('#iHue').getValue()) - 7, true); + this.down('#rgbPicker').getEl().moveTo(cRgb.getLeft() + this.getSPos(this.down('#iSat').getValue() / 100) - 7, + cHue.getTop() + this.getVPos(this.down('#iVal').getValue() / 100) - 7, true); }, setButtonColor : function(id, rgb) { @@ -366,37 +363,38 @@ Ext.define('Ext.ux.colorpicker.ColorPicker', { }, hsvToRgb : function(hsv) { - var r, g, b, i, f, p, q, t; - i = Math.floor((hsv.h / 60) % 6); - f = (hsv.h / 60) - i; - p = hsv.v * (1 - hsv.s); - q = hsv.v * (1 - f * hsv.s); - t = hsv.v * (1 - (1 - f) * hsv.s); - switch (i) { - case 0: - r = hsv.v, g = t, b = p; - break; - case 1: - r = q, g = hsv.v, b = p; - break; - case 2: - r = p, g = hsv.v, b = t; - break; - case 3: - r = p, g = q, b = hsv.v; - break; - case 4: - r = t, g = p, b = hsv.v; - break; - case 5: - r = hsv.v, g = p, b = q; - break; + var result = { r: 0, g: 0, b: 0 }; + var h = hsv.h / 360; + var s = hsv.s / 100; + var v = hsv.v / 100; + + if (s == 0) { + result.r = v * 255; + result.g = v * 255; + result.v = v * 255; + } else { + var_h = h * 6; + var_i = Math.floor(var_h); + var_1 = v * (1 - s); + var_2 = v * (1 - s * (var_h - var_i)); + var_3 = v * (1 - s * (1 - (var_h - var_i))); + + if (var_i == 0) {var_r = v; var_g = var_3; var_b = var_1} + else if (var_i == 1) {var_r = var_2; var_g = v; var_b = var_1} + else if (var_i == 2) {var_r = var_1; var_g = v; var_b = var_3} + else if (var_i == 3) {var_r = var_1; var_g = var_2; var_b = v} + else if (var_i == 4) {var_r = var_3; var_g = var_1; var_b = v} + else {var_r = v; var_g = var_1; var_b = var_2}; + + result.r = var_r * 255; + result.g = var_g * 255; + result.b = var_b * 255; + + result.r = Math.round(result.r); + result.g = Math.round(result.g); + result.b = Math.round(result.b); } - return { - r: this.realToDec(r), - g: this.realToDec(g), - b: this.realToDec(b) - }; + return result; }, /** * Convert a float to decimal @@ -471,34 +469,31 @@ Ext.define('Ext.ux.colorpicker.ColorPicker', { }, rgbToHsv : function(rgb) { - r = rgb.r / 255, g = rgb.g / 255, b = rgb.b / 255; - var max = Math.max(r, g, b), min = Math.min(r, g, b); - var h, s, v = max; + var result = { h: 0, s:0, v:0 },r = rgb.r / 255, g = rgb.g / 255,b = rgb.b / 255, minVal = Math.min(r, g, b), + maxVal = Math.max(r, g, b), delta = maxVal - minVal; - var d = max - min; - s = max == 0 ? 0 : d / max; + result.v = maxVal; - if (max == min) { - h = 0; // achromatic + if (delta == 0) { + result.h = 0; + result.s = 0; } else { - switch (max) { - case r: - h = (g - b) / d + (g < b ? 6 : 0); - break; - case g: - h = (b - r) / d + 2; - break; - case b: - h = (r - g) / d + 4; - break; - } - h /= 6; + result.s = delta / maxVal; + var del_R = (((maxVal - r) / 6) + (delta / 2)) / delta; + var del_G = (((maxVal - g) / 6) + (delta / 2)) / delta; + var del_B = (((maxVal - b) / 6) + (delta / 2)) / delta; + + if (r == maxVal) { result.h = del_B - del_G; } + else if (g == maxVal) { result.h = (1 / 3) + del_R - del_B; } + else if (b == maxVal) { result.h = (2 / 3) + del_G - del_R; } + + if (result.h < 0) { result.h += 1; } + if (result.h > 1) { result.h -= 1; } } - return { - h: h, - s: s, - v: v - }; + result.h = Math.round(result.h * 360); + result.s = Math.round(result.s * 100); + result.v = Math.round(result.v * 100); + return result; } }); From bbbfe002a6a077c0a77532f9a831d41699f44ba6 Mon Sep 17 00:00:00 2001 From: Tim de Koning Date: Wed, 18 Jan 2012 20:08:15 +0100 Subject: [PATCH 3/3] All references to "me" are not needed and should be removed --- .../src/ux/colorpicker/ColorPicker.js | 63 +++++++++---------- 1 file changed, 28 insertions(+), 35 deletions(-) diff --git a/Ext.ux.ColorPicker/src/ux/colorpicker/ColorPicker.js b/Ext.ux.ColorPicker/src/ux/colorpicker/ColorPicker.js index 2128d44..288040e 100644 --- a/Ext.ux.ColorPicker/src/ux/colorpicker/ColorPicker.js +++ b/Ext.ux.ColorPicker/src/ux/colorpicker/ColorPicker.js @@ -176,39 +176,36 @@ Ext.define('Ext.ux.colorpicker.ColorPicker', { } ], constructor : function(config) { - var me = this; - me.initConfig(config); - me.addEvents('select'); - me.callParent(arguments); + this.initConfig(config); + this.addEvents('select'); + this.callParent(arguments); return this; }, afterRender : function(component) { - var me = this; - me.callParent(arguments); - if (me.value) - me.setColor(me.value); + this.callParent(arguments); + if (this.value) + this.setColor(this.value); }, initEvents : function() { - var me = this; - me.callParent(); + this.callParent(); - me.down('#cRgb').getEl().on('mousedown', me.rgbClick, me); - me.down('#cHue').getEl().on('mousedown', me.hueClick, me); + this.down('#cRgb').getEl().on('mousedown', this.rgbClick, this); + this.down('#cHue').getEl().on('mousedown', this.hueClick, this); - me.down('#iHexa').on('blur', me.hexaChange, me); - me.down('#iRed').on('blur', me.rgbChange, me); - me.down('#iGreen').on('blur', me.rgbChange, me); - me.down('#iBlue').on('blur', me.rgbChange, me); + this.down('#iHexa').on('blur', this.hexaChange, this); + this.down('#iRed').on('blur', this.rgbChange, this); + this.down('#iGreen').on('blur', this.rgbChange, this); + this.down('#iBlue').on('blur', this.rgbChange, this); - me.down('#iHue').on('blur', me.hsvChange, me); - me.down('#iSat').on('blur', me.hsvChange, me); - me.down('#iVal').on('blur', me.hsvChange, me); + this.down('#iHue').on('blur', this.hsvChange, this); + this.down('#iSat').on('blur', this.hsvChange, this); + this.down('#iVal').on('blur', this.hsvChange, this); - me.down('#bWebsafe').on('click', me.websafeClick, me); - me.down('#bInverse').on('click', me.inverseClick, me); - me.down('#bSelect').on('click', me.selectClick, me); + this.down('#bWebsafe').on('click', this.websafeClick, this); + this.down('#bInverse').on('click', this.inverseClick, this); + this.down('#bSelect').on('click', this.selectClick, this); }, websafeClick : function() { @@ -220,14 +217,12 @@ Ext.define('Ext.ux.colorpicker.ColorPicker', { }, selectClick : function() { - var me = this, color; - color = me.down('#cSelect').getEl().getColor('backgroundColor', '', ''); + var color = this.down('#cSelect').getEl().getColor('backgroundColor', '', ''); this.fireEvent('select', this, color.toUpperCase()); }, getColor : function() { - var me = this, hsv = me.getHsv(); - return me.hsvToRgb(hsv); + return this.hsvToRgb(this.getHsv()); }, setValue : function(v) { @@ -236,13 +231,12 @@ Ext.define('Ext.ux.colorpicker.ColorPicker', { }, setColor : function(c) { - var me = this; - if (me.rendered) { + if (this.rendered) { c = c.replace('#', ''); if (!/^[0-9a-fA-F]{6}$/.test(c)) return; - me.down('#iHexa').setValue(c); - me.hexaChange(); + this.down('#iHexa').setValue(c); + this.hexaChange(); } }, @@ -275,8 +269,8 @@ Ext.define('Ext.ux.colorpicker.ColorPicker', { }, rgbClick : function(event, el) { - var me = this, cRgb = me.down('#cRgb').getEl(); - me.moveRgbPicker(event.getXY()[0] - cRgb.getLeft(), event.getXY()[1] - cRgb.getTop()); + var cRgb = this.down('#cRgb').getEl(); + this.moveRgbPicker(event.getXY()[0] - cRgb.getLeft(), event.getXY()[1] - cRgb.getTop()); }, moveHuePicker : function(y) { @@ -333,9 +327,8 @@ Ext.define('Ext.ux.colorpicker.ColorPicker', { }, setButtonColor : function(id, rgb) { - var me = this, dq = Ext.DomQuery, invert = me.invert(rgb); - me.down(id).getEl().applyStyles({ - 'background' : '#' + me.rgbToHex(rgb) + this.down(id).getEl().applyStyles({ + 'background' : '#' + this.rgbToHex(rgb) }); }, /**