Super classes

Ext.AbstractComponent Ext.Component

Slider which supports vertical or horizontal orientation, keyboard adjustments, configurable snapping, axis clicking and animation. Can be added as an item to any container. Example usage:

new Ext.Slider({
    renderTo: Ext.getBody(),
    width: 200,
    value: 50,
    increment: 10,
    minValue: 0,
    maxValue: 100
});

Sliders can be created with more than one thumb handle by passing an array of values instead of a single one:

new Ext.Slider({
    renderTo: Ext.getBody(),
    width: 200,
    values: [25, 50, 75],
    minValue: 0,
    maxValue: 100,

    //this defaults to true, setting to false allows the thumbs to pass each other
    constrainThumbs: false
});

Config Options

animate : Boolean

Turn on or off animation. Defaults to true

autoEl : Mixed

A tag name or DomHelper spec used to create the Element which will encapsulate this Component. You do not normally ne...

A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

You do not normally need to specify this. For the base classes Ext.Component and Ext.container.Container, this defaults to 'div'. The more complex Sencha classes use a more complex DOM structure specified by their own renderTpls.

This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:

{
    xtype: 'component',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'
    }
}, {
    xtype: 'component',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'component',
        autoEl: 'li',
        html: 'First list item'
    }
}

autoRender : Mixed

This config is intended mainly for floating Components which may or may not be shown. Instead of using renderTo in th...

This config is intended mainly for floating Components which may or may not be shown. Instead of using renderTo in the configuration, and rendering upon construction, this allows a Component to render itself upon first show.

Specify as true to have this Component render to the document body upon first show.

Specify as an element, or the ID of an element to have this Component render to a specific element upon first show.

This defaults to true for the Window class.

baseCls : String

The base CSS class to apply to this components's element. This will also be prepended to elements within this compone...

The base CSS class to apply to this components's element. This will also be prepended to elements within this component like Panel's body will get a class x-panel-body. This means that if you create a subclass of Panel, and you want it to get all the Panels styling for the element and the body, you leave the baseCls x-panel and use componentCls to add specific styling for this component.

border : Number/String

Specifies the border for this component. The border can be a single numeric value to apply to all sides or it can be ...

Specifies the border for this component. The border can be a single numeric value to apply to all sides or it can be a CSS style specification for each style, for example: '10 5 3 10'.

clickToChange : Boolean

Determines whether or not clicking on the Slider axis will change the slider. Defaults to true

cls : String

An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be useful for ...

An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be useful for adding customized styles to the component or any of its children using standard CSS rules.

componentCls : String

CSS Class to be added to a components root level element to give distinction to it via styling.

componentLayout : String/Object

The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout manager...

The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout manager which sizes a Component's internal structure in response to the Component being sized.

Generally, developers will not use this configuration as all provided Components which need their internal elements sizing (Such as input fields) come with their own componentLayout managers.

The default layout manager will be used on instances of the base Ext.Component class which simply sizes the Component's encapsulating element to the height and width specified in the setSize method.

constrainThumbs : Boolean

True to disallow thumbs from overlapping one another. Defaults to true

contentEl : String

Optional. Specify an existing HTML element, or the id of an existing HTML element to use as the content for this comp...

Optional. Specify an existing HTML element, or the id of an existing HTML element to use as the content for this component.

Description :
This config option is used to take an existing HTML element and place it in the layout element of a new component (it simply moves the specified DOM element after the Component is rendered to use as the content.
Notes :
The specified HTML element is appended to the layout element of the component after any configured HTML has been inserted, and so the document will not contain this element at the time the render event is fired.

The specified HTML element used will not participate in any layout scheme that the Component may use. It is just HTML. Layouts operate on child items.

Add either the x-hidden or the x-hide-display CSS class to prevent a brief flicker of the content before it is rendered to the panel.

data : Mixed

The initial set of data to apply to the tpl to update the content area of the Component.

decimalPrecision. : Number/Boolean

The number of decimal places to which to round the Slider's value. Defaults to 0. To disable rounding, configure as f...

The number of decimal places to which to round the Slider's value. Defaults to 0.

To disable rounding, configure as false.

disabled : Boolean

Defaults to false.

disabledCls : String

CSS class to add when the Component is disabled. Defaults to 'x-item-disabled'.

draggable : Boolean

Allows the component to be dragged via the touch event.

floating : Boolean

Specify as true to float the Component outside of the document flow using CSS absolute positioning. Components such a...

Specify as true to float the Component outside of the document flow using CSS absolute positioning.

Components such as Windows and Menus are floating by default.

frame : Boolean

Specify as true to have the Component inject framing elements within the Component at render time to provide a graphi...

Specify as true to have the Component inject framing elements within the Component at render time to provide a graphical rounded frame around the Component content.

This is only necessary when running on outdated, or non standard-compliant browsers such as Microsoft's Internet Explorer prior to version 9 which do not support rounded corners natively.

The extra space taken up by this framing is available from the read only property frameSize.

height : Number

The height of this component in pixels.

hidden : Boolean

Defaults to false.

hideMode : String

A String which specifies how this Component's encapsulating DOM element will be hidden. Values may be<div class="mdet...

A String which specifies how this Component's encapsulating DOM element will be hidden. Values may be

'display' : The Component will be hidden using the display: none style.
'visibility' : The Component will be hidden using the visibility: hidden style.
'offsets' : The Component will be hidden by absolutely positioning it out of the visible area of the document. This is useful when a hidden Component must maintain measurable dimensions. Hiding using display results in a Component having zero dimensions.

Defaults to 'display'.

html : String/Object

An HTML fragment, or a DomHelper specification to use as the layout element content (defaults to ''). The HTML conten...

An HTML fragment, or a DomHelper specification to use as the layout element content (defaults to ''). The HTML content is added after the component is rendered, so the document will not contain this HTML at the time the render event is fired. This content is inserted into the body before any configured contentEl is appended.

id : String

The unique id of this component instance (defaults to an auto-assigned id). It should not be necessary to use this co...

The unique id of this component instance (defaults to an auto-assigned id).

It should not be necessary to use this configuration except for singleton objects in your application. Components created with an id may be accessed globally using Ext.getCmp.

Instead of using assigned ids, use the itemId config, and ComponentQuery which provides selector-based searching for Sencha Components analogous to DOM querying. The Container class contains shortcut methods to query its descendant Components by selector.

Note that this id will also be used as the element id for the containing HTML element that is rendered to the page for this component. This allows you to write id-based CSS rules to style the specific instance of this component uniquely, and also to select sub-elements using this component's id as the parent.

Note: to avoid complications imposed by a unique id also see itemId.

Note: to access the container of a Component see ownerCt.

increment : Number

How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'.

itemId : String

An itemId can be used as an alternative way to get a reference to a component when no object reference is available. ...

An itemId can be used as an alternative way to get a reference to a component when no object reference is available. Instead of using an id with Ext.getCmp, use itemId with Ext.Container.getComponent which will retrieve itemId's or id's. Since itemId's are an index to the container's internal MixedCollection, the itemId is scoped locally to the container -- avoiding potential conflicts with Ext.ComponentMgr which requires a unique id.

var c = new Ext.Panel({ //
    height: 300,
    renderTo: document.body,
    layout: 'auto',
    items: [
        {
            itemId: 'p1',
            title: 'Panel 1',
            height: 150
        },
        {
            itemId: 'p2',
            title: 'Panel 2',
            height: 150
        }
    ]
})
p1 = c.getComponent('p1'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

Also see id and ref.

Note: to access the container of an item see ownerCt.

keyIncrement : Number

How many units to change the Slider when adjusting with keyboard navigation. Defaults to 1. If the increment config i...

How many units to change the Slider when adjusting with keyboard navigation. Defaults to 1. If the increment config is larger, it will be used instead.

loader : Ext.ComponentLoader/Object

A configuration object or an instance of a Ext.ComponentLoader to load remote content for this Component.

maintainFlex : Boolean

Only valid when a sibling element of a Splitter within a VBox or HBox layout. Specifies that if an immediate sibling ...

Only valid when a sibling element of a Splitter within a VBox or HBox layout.

Specifies that if an immediate sibling Splitter is moved, the Component on the other side is resized, and this Component maintains its configured flex value.

margin : Number/String

Specifies the margin for this component. The margin can be a single numeric value to apply to all sides or it can be ...

Specifies the margin for this component. The margin can be a single numeric value to apply to all sides or it can be a CSS style specification for each style, for example: '10 5 3 10'.

maxHeight : Number

The maximum value in pixels which this Component will set its height to. Warning: This will override any size managem...

The maximum value in pixels which this Component will set its height to.

Warning: This will override any size management applied by layout managers.

maxValue : Number

The maximum value for the Slider. Defaults to 100.

maxWidth : Number

The maximum value in pixels which this Component will set its width to. Warning: This will override any size manageme...

The maximum value in pixels which this Component will set its width to.

Warning: This will override any size management applied by layout managers.

minHeight : Number

The minimum value in pixels which this Component will set its height to. Warning: This will override any size managem...

The minimum value in pixels which this Component will set its height to.

Warning: This will override any size management applied by layout managers.

minValue : Number

The minimum value for the Slider. Defaults to 0.

minWidth : Number

The minimum value in pixels which this Component will set its width to. Warning: This will override any size manageme...

The minimum value in pixels which this Component will set its width to.

Warning: This will override any size management applied by layout managers.

overCls : String

An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and...

An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and removed when the mouse moves out. (defaults to ''). This can be useful for adding customized 'active' or 'hover' styles to the component or any of its children using standard CSS rules.

padding : Number/String

Specifies the padding for this component. The padding can be a single numeric value to apply to all sides or it can b...

Specifies the padding for this component. The padding can be a single numeric value to apply to all sides or it can be a CSS style specification for each style, for example: '10 5 3 10'.

plugins : Object/Array

An object or array of objects that will provide custom functionality for this component. The only requirement for a ...

An object or array of objects that will provide custom functionality for this component. The only requirement for a valid plugin is that it contain an init method that accepts a reference of type Ext.Component. When a component is created, if any plugins are available, the component will call the init method on each plugin, passing a reference to itself. Each plugin can then call methods or respond to events on the component as needed to provide its functionality.

renderTo : Mixed

Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. Notes ...

Specify the id of the element, a DOM element or an existing Element that this component will be rendered into.

Notes :

See render also.

renderTpl : Mixed

An XTemplate used to create the internal structure inside this Component's encapsulating Element. You do not normally...

An XTemplate used to create the internal structure inside this Component's encapsulating Element.

You do not normally need to specify this. For the base classes Ext.Component and Ext.container.Container, this defaults to null which means that they will be initially rendered with no internal structure; they render their Element empty. The more specialized ExtJS and Touch classes which use a more complex DOM structure, provide their own template definitions.

This is intended to allow the developer to create application-specific utility Components with customized internal structure.

Upon rendering, any created child elements may be automatically imported into object properties using the renderSelectors option.

resizable : Mixed

Specify as true to apply a Resizer to this Component after rendering. May also be specified as a config object to be ...

Specify as true to apply a Resizer to this Component after rendering.

May also be specified as a config object to be passed to the constructor of Resizer to override any defaults. By default the Component passes its minimum and maximum size, and uses Ext.resize.Resizer.dynamic: false

style : String

A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.core.Eleme...

A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.core.Element.applyStyles.

new Ext.Panel({
            title: 'Some Title',
            renderTo: Ext.getBody(),
            width: 400, height: 300,
            layout: 'form',
            items: [{
                xtype: 'textarea',
                style: {
                    width: '95%',
                    marginBottom: '10px'
                }
            },
            new Ext.Button({
                text: 'Send',
                minWidth: '100',
                style: {
                    marginBottom: '10px'
                }
            })
            ]
        });

styleHtmlCls : String

The class that is added to the content target when you set styleHtmlContent to true. Defaults to 'x-html'

styleHtmlContent : String

True to automatically style the html inside the content target of this component (body for panels). Defaults to false...

True to automatically style the html inside the content target of this component (body for panels). Defaults to false.

tipText : Function

A function used to display custom text for the slider tip. Defaults to null, which will use the default on the plugin...

A function used to display custom text for the slider tip. Defaults to null, which will use the default on the plugin.

tpl : Mixed

An Ext.Template, Ext.XTemplate or an array of strings to form an Ext.XTemplate. Used in conjunction with the data and...

An Ext.Template, Ext.XTemplate or an array of strings to form an Ext.XTemplate. Used in conjunction with the data and tplWriteMode configurations.

tplWriteMode : String

The Ext.(X)Template method to use when updating the content area of the Component. Defaults to 'overwrite' (see Ext.X...

The Ext.(X)Template method to use when updating the content area of the Component. Defaults to 'overwrite' (see Ext.XTemplate.overwrite).

ui : String

A set of predefined ui styles for individual components. Most components support 'light' and 'dark'. Extra string add...

A set of predefined ui styles for individual components. Most components support 'light' and 'dark'. Extra string added to the baseCls with an extra '-'.

new Ext.Panel({
          title: 'Some Title',
          baseCls: 'x-component'
          ui: 'green'
      });

The ui configuration in this example would add 'x-component-green' as an additional class.

useTips : Boolean

True to use an Ext.slider.Tip to display tips for the value. Defaults to true.

value : Number

The value to initialize the slider with. Defaults to minValue.

vertical : Boolean

Orient the Slider vertically rather than horizontally, defaults to false.

width : Number

The width of this component in pixels.

Properties

draggable : Boolean

Read-only property indicating whether or not the component can be dragged

dragging : Boolean

True while the thumb is in a drag operation

frameSize : Object

Read-only property indicating the width of any framing elements which were added within the encapsulating element to ...

Read-only property indicating the width of any framing elements which were added within the encapsulating element to provide graphical, rounded borders. See the frame config.

This is an object containing the frame width in pixels for all four sides of the Component containing the following properties:

top The width of the top framing element in pixels.
right The width of the right framing element in pixels.
bottom The width of the bottom framing element in pixels.
left The width of the left framing element in pixels.

ownerCt : Ext.Container

This Component's owner Container (defaults to undefined, and is set automatically when this Component is added to a C...

This Component's owner Container (defaults to undefined, and is set automatically when this Component is added to a Container). Read-only.

Note: to access items within the Container see itemId.

rendered : Boolean

Read-only property indicating whether or not the component has been rendered.

thumbs : Array Array containing references to each thumb

values : Array Array of values to initalize the thumbs with

{Ext.ZIndexManager} : Object

zIndexManager Optional. Only valid for floating Components. A reference to the ZIndexManager that should manage this ...

zIndexManager

Optional. Only valid for floating Components. A reference to the ZIndexManager that should manage this Component.

This defaults to the global Ext.WindowMgr for floating Components that are programatically rendered.

For floating Components which are added at a Container, the Container assigns a ZIndexManager.

Methods

addCls : Void

Adds a CSS class to the top level element representing this component.

addThumb( Number value ) : Ext.slider.Thumb

Creates a new thumb and adds it to the slider

Parameters

value : Number
The initial value to set on the thumb. Defaults to 0

Returns

Ext.slider.Thumb The thumb

afterComponentLayout( Ext.Component this, Number adjWidth, Number adjHeight ) : Void

Parameters

this : Ext.Component
adjWidth : Number
The box-adjusted width that was set
adjHeight : Number
The box-adjusted height that was set

Returns

Void

applyToMarkup( String/HTMLElement el ) : Void

Apply this component to existing markup that is valid. With this function, no call to render() is required.

Parameters

el : String/HTMLElement

Returns

Void

bubble( Function fn, [Object scope], [Array args] ) : Ext.Component

Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of...

Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of function call will be the scope provided or the current component. The arguments to the function will be the args provided or the current component. If the function returns false at any point, the bubble is stopped.

Parameters

fn : Function
The function to call
scope : Object
(optional) The scope of the function (defaults to current node)
args : Array
(optional) The args to call the function with (default to passing the current component)

Returns

Ext.Component this

cloneConfig( Object overrides ) : Ext.Component

Clone the current component using the original config values passed into this instance by default.

Parameters

overrides : Object
A new config containing any properties to override in the cloned version. An id property can be passed on this object, otherwise one will be generated to avoid duplicates.

Returns

Ext.Component clone The cloned copy of this component

destroy : Void

Destroys the Component.

disable( Boolean silent ) : Void

Disable the component.

Parameters

silent : Boolean
Passing true, will supress the 'disable' event from being fired.

Returns

Void

doAutoRender : Void

Handles autoRender. Floating Components may have an ownerCt. If they are asking to be constrained, constrain them wit...

Handles autoRender. Floating Components may have an ownerCt. If they are asking to be constrained, constrain them within that ownerCt, and have their z-index managed locally. Floating Components are always rendered to document.body

doComponentLayout : Ext.container.Container

This method needs to be called whenever you change something on this component that requires the components layout to...

This method needs to be called whenever you change something on this component that requires the components layout to be recalculated.

enable( Boolean silent ) : Void

Enable the component

Parameters

silent : Boolean
Passing false will supress the 'enable' event from being fired.

Returns

Void

findParentBy( Function fn ) : Ext.container.Container

Find a container above this component at any level by a custom function. If the passed function returns true, the con...

Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned.

Parameters

fn : Function
The custom function to call with the arguments (container, this component).

Returns

Ext.container.Container The first Container for which the custom function returns true

findParentByType( String/Class xtype ) : Ext.container.Container

Find a container above this component at any level by xtype or class See also the up method.

Find a container above this component at any level by xtype or class

Parameters

xtype : String/Class
The xtype string for a component, or the class of the component directly

Returns

Ext.container.Container The first Container which matches the given xtype or class

focus( [Boolean selectText], [Boolean/Number delay] ) : Ext.Component

Try to focus this component.

Parameters

selectText : Boolean
(optional) If applicable, true to also select the text in this component
delay : Boolean/Number
(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)

Returns

Ext.Component this

getBox( [Boolean local] ) : Object

Gets the current box measurements of the component's underlying element.

Parameters

local : Boolean
(optional) If true the element's left and top are returned instead of page XY (defaults to false)

Returns

Object box An object in the format {x, y, width, height}

getBubbleTarget : Ext.container.Container

Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.

getEl : Void

Retrieves the top level element representing this component.

getHeight : Number

Gets the current height of the component's underlying element.

getId : Void

Retrieves the id of this component. Will autogenerate an id if one has not already been set.

getInsertPosition( String/Number/Element/HTMLElement position ) : HTMLElement

This function takes the position argument passed to onRender and returns a DOM element that you can use in the insert...

This function takes the position argument passed to onRender and returns a DOM element that you can use in the insertBefore.

Parameters

position : String/Number/Element/HTMLElement
Index, element id or element you want to put this component before.

Returns

HTMLElement DOM element that you can use in the insertBefore

getLoader : Ext.ComponentLoader

Gets the Ext.ComponentLoader for this Component.

getPlugin : Void

Retrieves a plugin by its pluginId which has been bound to this component.

getPosition( [Boolean local] ) : Array

Gets the current XY position of the component's underlying element.

Parameters

local : Boolean
(optional) If true the element's left and top are returned instead of page XY (defaults to false)

Returns

Array The XY position of the element (e.g., [100, 200])

getSize : Object

Gets the current size of the component's underlying element.

getValue( Number index ) : Number

Returns the current value of the slider

Parameters

index : Number
The index of the thumb to return a value for

Returns

Number The current value of the slider

getValues : Array

Returns an array of values - one for the location of each thumb

getWidth : Number

Gets the current width of the component's underlying element.

getXType : String

Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ex...

Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.Text();
alert(t.getXType());  // alerts 'textfield'

getXTypes : String

Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext...

Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

Example usage:

var t = new Ext.form.Text();
alert(t.getXTypes());  // alerts 'component/field/textfield'

isDisabled : Boolean

Method to determine whether this Component is currently disabled.

isDraggable : Boolean

Method to determine whether this Component is draggable.

isDroppable : Boolean

Method to determine whether this Component is droppable.

isFloating : Boolean

Method to determine whether this Component is floating.

isHidden : Boolean

Method to determine whether this Component is currently set to hidden.

isVisible( Boolean deep. ) : Boolean

Returns true if this component is visible.

Parameters

deep. : Boolean
Optional. Pass true to interrogate the visibility status of all parent Containers to determine whether this Component is truly visible to the user.

Generally, to determine whether a Component is hidden, the no argument form is needed. For example when creating dynamically laid out UIs in a hidden Container before showing them.

Returns

Boolean True if this component is visible, false otherwise.

isXType( String xtype, [Boolean shallow] ) : Boolean

Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...

Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from the xtype (default) or whether it is directly of the xtype specified (shallow = true).

If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

For a list of all available xtypes, see the Ext.Component header.

Example usage:

var t = new Ext.form.Text();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('field');       // true, descended from Ext.form.Field
var isBoxInstance = t.isXType('field', true); // false, not a direct Ext.form.Field instance

Parameters

xtype : String
The xtype to check for this Component
shallow : Boolean
(optional) False to check whether this Component is descended from the xtype (this is the default), or true to check whether this Component is directly of the specified xtype.

Returns

Boolean True if this component descends from the specified xtype, false otherwise.

nextSibling( selector Optional. ) : Void

Returns the next sibling of this Component. Optionally selects the next sibling which matches the passed ComponentQue...

Returns the next sibling of this Component.

Optionally selects the next sibling which matches the passed ComponentQuery selector.

May also be refered to as prev()

Parameters

Optional. : selector
A ComponentQuery selector to filter the following items.

Returns

Void

previousSibling( selector Optional. ) : Void

Returns the previous sibling of this Component. Optionally selects the previous sibling which matches the passed Comp...

Returns the previous sibling of this Component.

Optionally selects the previous sibling which matches the passed ComponentQuery selector.

May also be refered to as prev()

Parameters

Optional. : selector
A ComponentQuery selector to filter the preceding items.

Returns

Void

removeCls : Void

Removes a CSS class from the top level element representing this component.

setAutoScroll( Boolean scroll ) : Ext.BoxComponent

Sets the overflow on the content element of the component.

Parameters

scroll : Boolean
True to allow the Component to auto scroll.

Returns

Ext.BoxComponent this

setDisabled( Boolean disabled ) : Void

Enable or disable the component.

Parameters

disabled : Boolean

Returns

Void

setDocked : Component

Sets the dock position of this component in its parent panel. Note that this only has effect if this item is part of ...

Sets the dock position of this component in its parent panel. Note that this only has effect if this item is part of the dockedItems collection of a parent that has a DockLayout (note that any Panel has a DockLayout by default)

setHeight( Number height ) : Ext.Component

Sets the height of the component. This method fires the resize event.

Parameters

height : Number
The new height to set. This may be one of:
- A Number specifying the new height in the Element's Ext.core.Element.defaultUnits (by default, pixels).
- A String used to set the CSS height style.
- undefined to leave the height unchanged.

Returns

Ext.Component this

setLoading( Boolean/Object load, Boolean targetEl ) : Ext.LoadMask

This method allows you to show or hide a LoadMask on top of this component.

Parameters

load : Boolean/Object
True to show the default LoadMask or a config object that will be passed to the LoadMask constructor. False to hide the current LoadMask.
targetEl : Boolean
True to mask the targetEl of this Component instead of the this.el. For example, setting this to true on a Panel will cause only the body to be masked. (defaults to false)

Returns

Ext.LoadMask The LoadMask instance that has just been shown.

setMaxValue( Number val ) : Void

Sets the maximum value for the slider instance. If the current value is more than the maximum value, the current valu...

Sets the maximum value for the slider instance. If the current value is more than the maximum value, the current value will be changed.

Parameters

val : Number
The new maximum value

Returns

Void

setMinValue( Number val ) : Void

Sets the minimum value for the slider instance. If the current value is less than the minimum value, the current valu...

Sets the minimum value for the slider instance. If the current value is less than the minimum value, the current value will be changed.

Parameters

val : Number
The new minimum value

Returns

Void

setPagePosition( Number x, Number y, Mixed animate ) : Ext.Component

Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the ...

Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.

Parameters

x : Number
The new x position
y : Number
The new y position
animate : Mixed
If passed, the Component is animated into its new position. If this parameter is a number, it is used as the animation duration in milliseconds.

Returns

Ext.Component this

setPosition( Number left, Number top, Mixed animate ) : Ext.Component

Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires ...

Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.

Parameters

left : Number
The new left
top : Number
The new top
animate : Mixed
If passed, the Component is animated into its new position. If this parameter is a number, it is used as the animation duration in milliseconds.

Returns

Ext.Component this

setSize( Mixed width, Mixed height ) : Ext.Component

Sets the width and height of this Component. This method fires the resize event. This method can accept either width ...

Sets the width and height of this Component. This method fires the resize event. This method can accept either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.

Parameters

width : Mixed
The new width to set. This may be one of:
- A Number specifying the new width in the Element's Ext.core.Element.defaultUnits (by default, pixels).
- A String used to set the CSS width style.
- A size object in the format {width: widthValue, height: heightValue}.
- undefined to leave the width unchanged.
height : Mixed
The new height to set (not required if a size object is passed as the first arg). This may be one of:
- A Number specifying the new height in the Element's Ext.core.Element.defaultUnits (by default, pixels).
- A String used to set the CSS height style. Animation may not be used.
- undefined to leave the height unchanged.

Returns

Ext.Component this

setValue( Number index, Number value, Boolean animate ) : Void

Programmatically sets the value of the Slider. Ensures that the value is constrained within the minValue and maxValue...

Programmatically sets the value of the Slider. Ensures that the value is constrained within the minValue and maxValue.

Parameters

index : Number
Index of the thumb to move
value : Number
The value to set the slider to. (This will be constrained within minValue and maxValue)
animate : Boolean
Turn on or off animation, defaults to true

Returns

Void

setVisible( Boolean visible ) : Ext.Component

Convenience function to hide or show this component by boolean.

Parameters

visible : Boolean
True to show, false to hide

Returns

Ext.Component this

setWidth( Number width ) : Ext.Component

Sets the width of the component. This method fires the resize event.

Parameters

width : Number
The new width to setThis may be one of:
- A Number specifying the new width in the Element's Ext.core.Element.defaultUnits (by default, pixels).
- A String used to set the CSS width style.

Returns

Ext.Component this

show( [String/Element animateTarget], [Function callback], [Object scope] ) : Component

Shows this Component, rendering it first if Ext.AbstractComponent.autoRender is true. For a Window, it activates it a...

Shows this Component, rendering it first if Ext.AbstractComponent.autoRender is true.

For a Window, it activates it and brings it to front if hidden.

Parameters

animateTarget : String/Element
(optional) The target element or id from which the Component should animate while opening (defaults to null with no animation)
callback : Function
(optional) A callback function to call after the window is displayed. Only necessary is animation was specified.
scope : Object
(optional) The scope (this reference) in which the callback is executed. Defaults to this Component.

Returns

Component this

syncThumbs : Void

Synchronizes thumbs position to the proper proportion of the total component width based on the current slider value....

Synchronizes thumbs position to the proper proportion of the total component width based on the current slider value. This will be called automatically when the Slider is resized by a layout, but if it is rendered auto width, this method can be called from another resize handler to sync the Slider if necessary.

up( String selector ) : Ext.container.Container

Walks up the ownerCt axis looking for an ancestor Container which matches the passed simple selector. Example:var own...

Walks up the ownerCt axis looking for an ancestor Container which matches the passed simple selector.

Example:

var owningTabContainer = grid.up('tabcontainer');

Parameters

selector : String
Optional. The simple selector to test.

Returns

Ext.container.Container The matching ancestor Container (or undefined if no match was found).

update( Mixed htmlOrData, [Boolean loadScripts], [Function callback] ) : Void

Update the content area of a component.

Parameters

htmlOrData : Mixed
If this component has been configured with a template via the tpl config then it will use this argument as data to populate the template. If this component was not configured with a template, the components content area will be updated via Ext.core.Element update
loadScripts : Boolean
(optional) Only legitimate when using the html configuration. Defaults to false
callback : Function
(optional) Only legitimate when using the html configuration. Callback to execute when scripts have finished loading

Returns

Void

updateBox( Object box ) : Ext.Component

Sets the current box measurements of the component's underlying element.

Parameters

box : Object
An object in the format {x, y, width, height}

Returns

Ext.Component this

Events

activate( Ext.Component this )

Fires after a Component has been visually activated.

Parameters

this : Ext.Component

Returns

Void

added( Ext.Component this, Ext.container.Container container, Number pos )

Fires after a Component had been added to a Container.

Parameters

this : Ext.Component
container : Ext.container.Container
Parent Container
pos : Number
position of Component

Returns

Void

afterrender( Ext.Component this )

Fires after the component rendering is finished. The afterrender event is fired after this Component has been rendere...

Fires after the component rendering is finished.

The afterrender event is fired after this Component has been rendered, been postprocesed by any afterRender method defined for the Component, and, if stateful, after state has been restored.

Parameters

this : Ext.Component

Returns

Void

beforeactivate( Ext.Component this )

Fires before a Component has been visually activated. Returning false from an event listener can prevent the activate...

Fires before a Component has been visually activated. Returning false from an event listener can prevent the activate from occurring.

Parameters

this : Ext.Component

Returns

Void

beforechange( Ext.Slider slider, Number newValue, Number oldValue )

Fires before the slider value is changed. By returning false from an event handler, you can cancel the event and prev...

Fires before the slider value is changed. By returning false from an event handler, you can cancel the event and prevent the slider from changing.

Parameters

slider : Ext.Slider
The slider
newValue : Number
The new value which the slider is being changed to.
oldValue : Number
The old value which the slider was previously.

Returns

Void

beforedeactivate( Ext.Component this )

Fires before a Component has been visually deactivated. Returning false from an event listener can prevent the deacti...

Fires before a Component has been visually deactivated. Returning false from an event listener can prevent the deactivate from occurring.

Parameters

this : Ext.Component

Returns

Void

beforedestroy( Ext.Component this )

Fires before the component is destroyed. Return false from an event handler to stop the destroy.

Parameters

this : Ext.Component

Returns

Void

beforehide( Ext.Component this )

Fires before the component is hidden when calling the hide method. Return false from an event handler to stop the hid...

Fires before the component is hidden when calling the hide method. Return false from an event handler to stop the hide.

Parameters

this : Ext.Component

Returns

Void

beforerender( Ext.Component this )

Fires before the component is rendered. Return false from an event handler to stop the render.

Parameters

this : Ext.Component

Returns

Void

beforeshow( Ext.Component this )

Fires before the component is shown when calling the show method. Return false from an event handler to stop the show...

Fires before the component is shown when calling the show method. Return false from an event handler to stop the show.

Parameters

this : Ext.Component

Returns

Void

change( Ext.Slider slider, Number newValue, Ext.slider.Thumb thumb )

Fires when the slider value is changed.

Parameters

slider : Ext.Slider
The slider
newValue : Number
The new value which the slider has been changed to.
thumb : Ext.slider.Thumb
The thumb that was changed

Returns

Void

changecomplete( Ext.Slider slider, Number newValue, Ext.slider.Thumb thumb )

Fires when the slider value is changed by the user and any drag operations have completed.

Parameters

slider : Ext.Slider
The slider
newValue : Number
The new value which the slider has been changed to.
thumb : Ext.slider.Thumb
The thumb that was changed

Returns

Void

deactivate( Ext.Component this )

Fires after a Component has been visually deactivated.

Parameters

this : Ext.Component

Returns

Void

destroy( Ext.Component this )

Fires after the component is destroyed.

Parameters

this : Ext.Component

Returns

Void

disable( Ext.Component this )

Fires after the component is disabled.

Parameters

this : Ext.Component

Returns

Void

drag( Ext.Slider slider, Ext.EventObject e )

Fires continuously during the drag operation while the mouse is moving.

Parameters

slider : Ext.Slider
The slider
e : Ext.EventObject
The event fired from Ext.dd.DragTracker

Returns

Void

dragend( Ext.Slider slider, Ext.EventObject e )

Fires after the drag operation has completed.

Parameters

slider : Ext.Slider
The slider
e : Ext.EventObject
The event fired from Ext.dd.DragTracker

Returns

Void

dragstart( Ext.Slider slider, Ext.EventObject e )

Fires after a drag operation has started.

Parameters

slider : Ext.Slider
The slider
e : Ext.EventObject
The event fired from Ext.dd.DragTracker

Returns

Void

enable( Ext.Component this )

Fires after the component is enabled.

Parameters

this : Ext.Component

Returns

Void

hide( Ext.Component this )

Fires after the component is hidden. Fires after the component is hidden when calling the hide method.

Parameters

this : Ext.Component

Returns

Void

move( Ext.Component this, Number x, Number y )

Fires after the component is moved.

Parameters

this : Ext.Component
x : Number
The new x position
y : Number
The new y position

Returns

Void

removed( Ext.Component this, Ext.container.Container ownerCt )

Fires when a component is removed from an Ext.container.Container

Parameters

this : Ext.Component
ownerCt : Ext.container.Container
Container which holds the component

Returns

Void

render( Ext.Component this )

Fires after the component markup is rendered.

Parameters

this : Ext.Component

Returns

Void

resize( Ext.Component this, Number adjWidth, Number adjHeight )

Fires after the component is resized.

Parameters

this : Ext.Component
adjWidth : Number
The box-adjusted width that was set
adjHeight : Number
The box-adjusted height that was set

Returns

Void

show( Ext.Component this )

Fires after the component is shown when calling the show method.

Parameters

this : Ext.Component

Returns

Void

Sencha Documentation

Ext.slider.Multi

Super classes

Config Options

Properties

Methods

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Events

Parameters

Returns

Parameters

Returns

Parameters