ExtJS 3 Color Picker Component

Our company requires a Javascript Color Picker component based ExtJS 3.x. The component will be conceptually similar to [login to view URL] with a number of additional capabilities. Note that you MUST NOT use any other library or open source code other than ExtJS 3.x. Any additional code must be written by you. ## Deliverables You will create an Javascript component based on the ExtJS 3.x library. The component permits a user to select a color. The goal is to create a component conceptually simillar to this reference component: [login to view URL] Note that the componet is only composed on the saturation square and the bar and not the color square or the fields showing RGB/HSV values. Please see attached pictures for clarity. The key differences with the reference component is that created component must support both a horizontal and a vertical orientation (see attached pictures) as well the ability to self size (so that if a smaller color picker is required the code will automaticall render the component smaller). Requirements: You MUST use ExtJS 3.x to build the component. You MUST NOT use any other javascript library. You MUST NOT use any code that duplicated ExtJS functionality. You SHOULD derive the component from BoxComponent. If you believe the component should be derived from another ExtJS component please confirm this before proceeding. The component requires the following configuration options (in addition to those inherited from Component and BoxComponent): animate : Boolean - simmilar to the Slider 'animate' option' - when true the thumb and square visibly move to the new position orientation : String - defaults to 'vertical' - may also be 'horizontal' value : String - this is the color value encoded in the #FEDCBA form The component requires the following properties (in addition to those inherited from Component and BoxComponent): dragging - true when either the slider or hue square is dragged The component requires the following public methods (in addition to those inherited from Component and BoxComponent): getColor() : Object - returns the current color as a simple object with the properties red, green and blue where each is value from 0 to 255 getValue() : String - returns the current color value in the #FEDCBA form setColor( Object color ) : Void - sets the current color from a simple object with the properties red, green and blue where each is value from 0 to 255 - an exception SHOULD be thrown if the given object does not have the properties or these are the wrong range The component requires the following events (in addition to those inherited from Component and BoxComponent): beforechange : ( ColorChooser chooser, String newColor, String oldColor ) - fires after the user has completed dragging any of the color widgets but before the component color is changed - returning false from an event handler will cancel the change, cauing the old color to be displayed change : ( ColorChooser chooser, String newColor ) - fires after the component color has been changed changing : ( ColorChooser chooser, String newColor ) - fires contibuously while the user is dragging any of the controls Note on sizing: - The maximum size of the saturation square is 256 x 256 (these should be constants) and is derived from the size of the image. (A large image would permit a larger maximum). - If the component is housed in an area taht would require a bigger saturation square it should be centered in that square. - If the component is housed in an area that requires a smaller saturation square then saturation square and the saturation bar must be made smaller. The square must be made smaller proportionatelly. The bar should be made smaller only along it's wider dimension (so a vertical bar will only have it's height adjusted). - The minimum size of the component is such that the saturation square is 64 x 64 pixels.