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. | ||
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 | |
Used to define events on this Observable | ||
addListener( String eventName , Function handler , [Object scope ], [Object options ] ) : void |
Observable | |
Appends an event handler to this component | ||
destroy() : void | Component | |
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the c... | ||
disable() : Ext.Component | Component | |
Disable this component. | ||
enable() : Ext.Component | 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 ) : Ext.Component |
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 has any listeners for a specified event | ||
hide() : Ext.Component | Component | |
Hide this component. | ||
isVisible() : void | Component | |
Returns true if this component is visible. | ||
on( String eventName , Function handler , [Object scope ], [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 ) : Ext.Component |
Component | |
Convenience function to hide or show this component by boolean. | ||
show() : Ext.Component | 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. Return false to stop the destroy. | ||
beforehide : ( Ext.Component this ) |
Component | |
Fires before the component is hidden. Return false to stop the hide. | ||
beforerender : ( Ext.Component this ) |
Component | |
Fires before the component is rendered. Return false to stop the render. | ||
beforeshow : ( Ext.Component this ) |
Component | |
Fires before the component is shown. Return false to stop the show. | ||
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 | |
---|---|---|
allowDomMove : Boolean | Component | |
Whether the component can move the Dom node when rendering (defaults to true). | ||
allowReselect : Boolean | ColorPalette | |
If set to true then reselecting a color that is already selected fires the selection event | ||
disableClass : String | Component | |
CSS class added to the component when it is disabled (defaults to "x-item-disabled"). | ||
hideMode : String | Component | |
How this component should hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset posi... | ||
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 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,
forumId: 4
});
Attaching multiple handlers in 1 call
The method also allows for a single argument to be passed which is a config object containing properties
which specify multiple handlers.
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 which passes the same scope object to all handlers:
el.on({
'click': this.onClick,
'mouseover': this.onMouseOver,
'mouseout': this.onMouseOut,
scope: this
});
void
public function destroy()
void
public function disable()
Ext.Component
public function enable()
Ext.Component
public function fireEvent( String eventName
, Object... args
)
eventName
: Stringargs
: Object...Boolean
public function focus( Boolean selectText
)
selectText
: BooleanExt.Component
public function getEl()
Ext.Element
public function getId()
String
public function hasListener( String eventName
)
eventName
: StringBoolean
public function hide()
Ext.Component
public function isVisible()
void
public function on( String eventName
, Function handler
, [Object scope
], [Object options
] )
eventName
: Stringhandler
: Functionscope
: Objectoptions
: 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
: BooleanExt.Component
public function show()
Ext.Component
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.ComponentallowDomMove : Boolean
allowReselect : Boolean
disableClass : String
hideMode : String
itemCls : String
value : String