/** * A basic component that changes background color, with considerations for opacity * support (checkered background image and IE8 support). */Ext.define('Ext.ux.colorpick.ColorPreview', { extend: 'Ext.Component', alias: 'widget.colorpickercolorpreview', requires: [ 'Ext.util.Format' ], cls: Ext.baseCSSPrefix + 'colorpreview', getTemplate: function() { return [ { reference: 'filterElement', cls: Ext.baseCSSPrefix + 'colorpreview-filter-el' }, { reference: 'btnElement', cls: Ext.baseCSSPrefix + 'colorpreview-btn-el', tag: 'a' } ]; }, onRender: function() { var me = this; me.callParent(arguments); me.mon(me.btnElement, 'click', me.onClick, me); }, onClick: function(e) { e.preventDefault(); this.fireEvent('click', this, this.color); }, // Called via databinding - update background color whenever ViewModel changes setColor: function(color) { this.color = color; this.applyBgStyle(color); }, applyBgStyle: function(color) { var me = this, colorUtils = Ext.ux.colorpick.ColorUtils, el = me.filterElement, rgba; rgba = colorUtils.getRGBAString(color); el.applyStyles({ background: rgba }); }});