Print Friendly

Class Ext.ColorPalette

Package:Ext
Class:ColorPalette
Extends:Component
Defined In:ColorPalette.js
Simple color palette class for choosing colors. The palette can be rendered to any container.
Here's an example of typical usage: 
var cp = new Ext.ColorPalette({value:'993300'});  // initial selected color
cp.render('my-div');

cp.on('select', function(palette, selColor){
    // do something with selColor
});

Properties   -  Methods   -  Events   -  Config Options

Public Properties

Property Defined By
  colors : Array ColorPalette
An array of 6-digit color hex code strings (without the # symbol). This array can contain any number of colors, and ...
  disabled : Object Component
true if this component is disabled. Read-only.
  disabledClass : Object Component
CSS class added to the component when it is disabled.
  hidden : Object Component
true if this component is hidden. Read-only.
  rendered : Object Component
true if this component has been rendered. Read-only.

Public Methods

Method Defined By
  ColorPalette(Object config) ColorPalette
Create a new ColorPalette
  addEvents(Object object) : void Observable
Copies any events from the passed object onto this object if they do not already exist. The passed object must also ...
  addListener(String eventName, Function handler, [Object options]) : void Observable
Appends an event handler to this component
  disable() : void Component
Disable this component
  enable() : void Component
Enable this component
  fireEvent(String eventName, Object... args) : Boolean Observable
Fires the specified event with the passed parameters (minus the event name).
  focus(Boolean selectText) : void Component
Try to focus this component
  getEl() : Ext.Element Component
Returns the underlying Ext.Element
  hasListener(String eventName) : Boolean Observable
Checks to see if this object is currently listening for a specified event
  hide() : void Component
Hide this component
  on(String eventName, Function handler, [Object options]) : void Observable
Appends an event handler to this element (shorthand for addListener)
  purgeListeners() : void Observable
Removes all listeners for this object
  removeListener(String eventName, Function handler, [Object scope]) : void Observable
Removes a listener
  render(String/HTMLElement/Element container) : void Component
If this is a lazy rendering component, render it to it's container element
  select(String color) : void ColorPalette
Selects the specified color in the palette (fires the select event)
  setDisabled(Boolean disabled) : void Component
Convenience function for setting disabled/enabled by boolean
  setVisible(Boolean visible) : void Component
Convenience function to hide or show this component by boolean
  show() : void Component
Show this component
  un(String eventName, Function handler, [Object scope]) : void Observable
Removes a listener (shorthand for removeListener)

Public Events

Event Defined By
  beforedestroy : (Ext.Component this) Component
Fires before the component is destroyed
  beforehide : (Ext.Component this) Component
Fires before the component is hidden
  beforerender : (Ext.Component this) Component
Fires before the component is rendered
  beforeshow : (Ext.Component this) Component
Fires before the component is shown
  destroy : (Ext.Component this) Component
Fires after the component is destroyed
  disable : (Ext.Component this) Component
Fires after the component is disabled
  enable : (Ext.Component this) Component
Fires after the component is enabled
  hide : (Ext.Component this) Component
Fires after the component is hidden
  render : (Ext.Component this) Component
Fires after the component is rendered
  select : (ColorPalette this, String color) ColorPalette
Fires when a color is selected
  show : (Ext.Component this) Component
Fires after the component is shown

Config Options

Config Options Defined By
  itemCls : String ColorPalette
The CSS class to apply to the containing element (defaults to "x-color-palette")
  value : String ColorPalette
The initial color to highlight (should be a valid 6-digit color hex code without the # symbol). Note that the hex cod...

Property Details

colors

public Array 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 palette is controlled via CSS by adjusting the width property of the 'x-color-palette' 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.ColorPalette();
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.ColorPalette();
cp.colors = ["000000", "993300", "333300"];
This property is defined by ColorPalette.

disabled

public Object disabled
true if this component is disabled. Read-only.
This property is defined by Component.

disabledClass

public Object disabledClass
CSS class added to the component when it is disabled.
This property is defined by Component.

hidden

public Object hidden
true if this component is hidden. Read-only.
This property is defined by Component.

rendered

public Object rendered
true if this component has been rendered. Read-only.
This property is defined by Component.

Constructor Details

ColorPalette

public function ColorPalette(Object config)
Create a new ColorPalette
Parameters:
  • config : Object
    The config object

Method Details

addEvents

public function addEvents(Object object)
Copies any events from the passed object onto this object if they do not already exist. The passed object must also inherit from Observable for this method to have any effect.
Parameters:
  • object : Object
    The object from which to copy events
Returns:
  • void
This method is defined by Observable.

addListener

public function addListener(String eventName, Function handler, [Object options])
Appends an event handler to this component
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • options : Object
    (optional)
Returns:
  • void
This method is defined by Observable.

disable

public function disable()
Disable this component
Parameters:
  • None.
Returns:
  • void
This method is defined by Component.

enable

public function enable()
Enable this component
Parameters:
  • None.
Returns:
  • void
This method is defined by Component.

fireEvent

public function fireEvent(String eventName, Object... args)
Fires the specified event with the passed parameters (minus the event name).
Parameters:
  • eventName : String
  • args : Object...
    Variable number of parameters are passed to handlers
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true
This method is defined by Observable.

focus

public function focus(Boolean selectText)
Try to focus this component
Parameters:
  • selectText : Boolean
    True to also select the text in this component (if applicable)
Returns:
  • void
This method is defined by Component.

getEl

public function getEl()
Returns the underlying Ext.Element
Parameters:
  • None.
Returns:
  • Ext.Element
    The element
This method is defined by Component.

hasListener

public function hasListener(String eventName)
Checks to see if this object is currently listening for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
This method is defined by Observable.

hide

public function hide()
Hide this component
Parameters:
  • None.
Returns:
  • void
This method is defined by Component.

on

public function on(String eventName, Function handler, [Object options])
Appends an event handler to this element (shorthand for addListener)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • options : Object
    (optional)
Returns:
  • void
This method is defined by Observable.

purgeListeners

public function purgeListeners()
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
This method is defined by Observable.

removeListener

public function removeListener(String eventName, Function handler, [Object scope])
Removes a listener
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The handler to remove
  • scope : Object
    (optional) The scope (this object) for the handler
Returns:
  • void
This method is defined by Observable.

render

public function render(String/HTMLElement/Element container)
If this is a lazy rendering component, render it to it's container element
Parameters:
  • container : String/HTMLElement/Element
    The element this component should be rendered into
Returns:
  • void
This method is defined by Component.

select

public function select(String color)
Selects the specified color in the palette (fires the select event)
Parameters:
  • color : String
    A valid 6-digit color hex code (# will be stripped if included)
Returns:
  • void
This method is defined by ColorPalette.

setDisabled

public function setDisabled(Boolean disabled)
Convenience function for setting disabled/enabled by boolean
Parameters:
  • disabled : Boolean
Returns:
  • void
This method is defined by Component.

setVisible

public function setVisible(Boolean visible)
Convenience function to hide or show this component by boolean
Parameters:
  • visible : Boolean
    True to show, false to hide
Returns:
  • void
This method is defined by Component.

show

public function show()
Show this component
Parameters:
  • None.
Returns:
  • void
This method is defined by Component.

un

public function un(String eventName, Function handler, [Object scope])
Removes a listener (shorthand for removeListener)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The handler to remove
  • scope : Object
    (optional) The scope (this object) for the handler
Returns:
  • void
This method is defined by Observable.

Event Details

beforedestroy

public event beforedestroy
Fires before the component is destroyed
Subscribers will be called with the following parameters:
  • this : Ext.Component
This event is defined by Component.

beforehide

public event beforehide
Fires before the component is hidden
Subscribers will be called with the following parameters:
  • this : Ext.Component
This event is defined by Component.

beforerender

public event beforerender
Fires before the component is rendered
Subscribers will be called with the following parameters:
  • this : Ext.Component
This event is defined by Component.

beforeshow

public event beforeshow
Fires before the component is shown
Subscribers will be called with the following parameters:
  • this : Ext.Component
This event is defined by Component.

destroy

public event destroy
Fires after the component is destroyed
Subscribers will be called with the following parameters:
  • this : Ext.Component
This event is defined by Component.

disable

public event disable
Fires after the component is disabled
Subscribers will be called with the following parameters:
  • this : Ext.Component
This event is defined by Component.

enable

public event enable
Fires after the component is enabled
Subscribers will be called with the following parameters:
  • this : Ext.Component
This event is defined by Component.

hide

public event hide
Fires after the component is hidden
Subscribers will be called with the following parameters:
  • this : Ext.Component
This event is defined by Component.

render

public event render
Fires after the component is rendered
Subscribers will be called with the following parameters:
  • this : Ext.Component
This event is defined by Component.

select

public event select
Fires when a color is selected
Subscribers will be called with the following parameters:
  • this : ColorPalette
  • color : String
    The 6-digit color hex code (without the # symbol)
This event is defined by ColorPalette.

show

public event show
Fires after the component is shown
Subscribers will be called with the following parameters:
  • this : Ext.Component
This event is defined by Component.

Config Details

itemCls

itemCls : String
The CSS class to apply to the containing element (defaults to "x-color-palette")
This config option is defined by ColorPalette.

value

value : String
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.
This config option is defined by ColorPalette.
Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.