Package: | Ext |
Class: | ColorPalette |
Extends: | Component |
Defined In: | ColorPalette.js |
var cp = new Ext.ColorPalette({value:'993300'}); // initial selected color
cp.render('my-div');
cp.on('select', function(palette, selColor){
// do something with selColor
});
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. |
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 scope ], [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 | ||
getId() : String | Component | |
Returns the id of this component | ||
hasListener(String eventName ) : Boolean |
Observable | |
Checks to see if this object is currently listening for a specified event | ||
hide() : void | Component | |
Hide this component | ||
isVisible() : void | Component | |
Returns true if this component is visible | ||
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 its 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) |
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 | 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... |
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"];
public Object disabled
public Object disabledClass
public Object hidden
public Object rendered
public function ColorPalette(Object config
)
config
: Objectpublic function addEvents(Object object
)
object
: Objectvoid
public function addListener(String eventName
, Function handler
, [Object scope
], [Object options
])
eventName
: Stringhandler
: Functionscope
: Objectoptions
: Object Combining Options
Using the options argument, it is possible to combine different types of listeners:
A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)
el.on('click', this.onClick, this, { single: true, delay: 100, stopEvent : true, forumId: 4 });
The method also allows for a single argument to be passed which is a config object containing properties which specify multiple handlers.
Attaching multiple handlers in 1 call
Code:
el.on({ 'click' : { fn: this.onClick scope: this, delay: 100 }, 'mouseover' : { fn: this.onMouseOver scope: this }, 'mouseout' : { fn: this.onMouseOut scope: this } });
Or a shorthand syntax:
Code:
el.on({ 'click' : this.onClick, 'mouseover' : this.onMouseOver, 'mouseout' : this.onMouseOut scope: this });
void
public function disable()
void
public function enable()
void
public function fireEvent(String eventName
, Object... args
)
eventName
: Stringargs
: Object...Boolean
public function focus(Boolean selectText
)
selectText
: Booleanvoid
public function getEl()
Ext.Element
public function getId()
String
public function hasListener(String eventName
)
eventName
: StringBoolean
public function hide()
void
public function isVisible()
void
public function on(String eventName
, Function handler
, [Object options
])
eventName
: Stringhandler
: Functionoptions
: Objectvoid
public function purgeListeners()
void
public function removeListener(String eventName
, Function handler
, [Object scope
])
eventName
: Stringhandler
: Functionscope
: Objectvoid
public function render([String/HTMLElement/Element container
])
container
: String/HTMLElement/Elementvoid
public function select(String color
)
color
: Stringvoid
public function setDisabled(Boolean disabled
)
disabled
: Booleanvoid
public function setVisible(Boolean visible
)
visible
: Booleanvoid
public function show()
void
public function un(String eventName
, Function handler
, [Object scope
])
eventName
: Stringhandler
: Functionscope
: Objectvoid
public event beforedestroy
this
: Ext.Componentpublic event beforehide
this
: Ext.Componentpublic event beforerender
this
: Ext.Componentpublic event beforeshow
this
: Ext.Componentpublic event destroy
this
: Ext.Componentpublic event disable
this
: Ext.Componentpublic event enable
this
: Ext.Componentpublic event hide
this
: Ext.Componentpublic event render
this
: Ext.Componentpublic event select
this
: ColorPalettecolor
: Stringpublic event show
this
: Ext.ComponentitemCls : String
value : String