Clear Up
SharpKit Reference

Color Class

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 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 select event, or by implementing the handler method.

    Ext.create('Ext.picker.Color', {
            value: '993300',  // initial selected color
            renderTo: Ext.getBody(),
            listeners: {
            select: function(picker, selColor) {

Namespace: Ext.picker



Name Description
allowReselect If set to true then reselecting a color that is already selected fires the select event Defaults to: false
clickEvent The DOM event that will cause a color to be selected. This can be any valid event name (dblclick, contextmenu). Defaults to: "click"
handler A function that will handle the select event of this picker. The handler is passed the following parameters:
  • picker : ColorPicker

    The picker.

  • color : String

    The 6-digit color hex code (without the # symbol).

  • scope The scope (this reference) in which the handler function will be called. Defaults to this Color picker instance.
    selectedCls The CSS class to apply to the selected element Defaults to: "x-color-picker-selected"
    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. Defaults to: null


    Name Description
    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'];
    Defaults to: ["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"]


    Name Description
    getValue() Get the currently selected color value.
    select(JsString, object) Selects the specified color in the picker (fires the select event)
    © Copyright 2005-2011 SharpKit. All rights reserved.