/javascripts/lib/docs/output/Ext.slider.MultiSlider.html
HTML | 1035 lines | 1026 code | 9 blank | 0 comment | 0 complexity | 5f5ed1caf9eea3d3affff0af15cbcff6 MD5 | raw file
Possible License(s): GPL-3.0
1<div class="body-wrap" xmlns:ext="http://www.extjs.com"><div class="top-tools"><a class="inner-link" href="#Ext.slider.MultiSlider-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a> <a class="inner-link" href="#Ext.slider.MultiSlider-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a> <a class="inner-link" href="#Ext.slider.MultiSlider-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a> <a class="inner-link" href="#Ext.slider.MultiSlider-configs"><img src="../resources/images/default/s.gif" class="item-icon icon-config">Config Options</a> <a class="bookmark" href="../docs/?class=Ext.slider.MultiSlider"><img src="../resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a> </div><div class="inheritance res-block"><pre class="res-block-inner"><a href="output/Ext.util.Observable.html" ext:member="" ext:cls="Ext.util.Observable">Observable</a> <img src="resources/elbow-end.gif"><a href="output/Ext.Component.html" ext:member="" ext:cls="Ext.Component">Component</a> <img src="resources/elbow-end.gif"><a href="output/Ext.BoxComponent.html" ext:member="" ext:cls="Ext.BoxComponent">BoxComponent</a> <img src="resources/elbow-end.gif">MultiSlider</pre></div><h1>Class <a href="source/Slider.html#cls-Ext.slider.MultiSlider">Ext.slider.MultiSlider</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext.slider</td></tr><tr><td class="label">Defined In:</td><td class="hd-info"><a href="source/Slider.html#cls-Ext.slider.MultiSlider">Slider.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/Slider.html#cls-Ext.slider.MultiSlider">MultiSlider</a></td></tr><tr><td class="label">Subclasses:</td><td class="hd-info"><a href="output/Ext.slider.SingleSlider.html" ext:cls="Ext.slider.SingleSlider">SingleSlider</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.BoxComponent.html" ext:cls="Ext.BoxComponent" ext:member="">BoxComponent</a></td></tr></table><div class="description">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:
2<pre>
3new Ext.Slider({
4 renderTo: Ext.getBody(),
5 width: 200,
6 value: 50,
7 increment: 10,
8 minValue: 0,
9 maxValue: 100
10});
11</pre>
12Sliders can be created with more than one thumb handle by passing an array of values instead of a single one:
13<pre>
14new Ext.Slider({
15 renderTo: Ext.getBody(),
16 width: 200,
17 values: [25, 50, 75],
18 minValue: 0,
19 maxValue: 100,
20
21 //this defaults to true, setting to false allows the thumbs to pass each other
22 <a href="output/Ext.slider.MultiSlider.html#Ext.slider.MultiSlider-constrainThumbs" ext:member="constrainThumbs" ext:cls="Ext.slider.MultiSlider">constrainThumbs</a>: false
23});
24</pre></div><div class="hr"></div><a id="Ext.slider.MultiSlider-configs"></a><h2>Config Options</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Config Options</th><th class="msource-header">Defined By</th></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-allowDomMove"></a><b><a href="source/Component.html#cfg-Ext.Component-allowDomMove">allowDomMove</a></b> : Boolean<div class="mdesc">Whether the component can move the Dom node when rendering (defaults to true).</div></td><td class="msource"><a href="output/Ext.Component.html#allowDomMove" ext:member="#allowDomMove" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-anchor"></a><b><a href="source/BoxComponent.html#cfg-Ext.BoxComponent-anchor">anchor</a></b> : String<div class="mdesc"><div class="short">Note: this config is only used when this Component is rendered
25by a Container which has been configured to use an Anc...</div><div class="long"><p><b>Note</b>: this config is only used when this Component is rendered
26by a Container which has been configured to use an <b><a href="output/Ext.layout.AnchorLayout.html" ext:cls="Ext.layout.AnchorLayout">AnchorLayout</a> (or subclass thereof).</b>
27based layout manager, for example:<div class="mdetail-params"><ul>
28<li><a href="output/Ext.form.FormPanel.html" ext:cls="Ext.form.FormPanel">Ext.form.FormPanel</a></li>
29<li>specifying <code>layout: <em>'anchor'</em> <i>// or <em>'form'</em>, or <em>'absolute'</em></i></code></li>
30</ul></div></p>
31<p>See <a href="output/Ext.layout.AnchorLayout.html" ext:cls="Ext.layout.AnchorLayout">Ext.layout.AnchorLayout</a>.<a href="output/Ext.layout.AnchorLayout.html#Ext.layout.AnchorLayout-anchor" ext:member="anchor" ext:cls="Ext.layout.AnchorLayout">anchor</a> also.</p></div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#anchor" ext:member="#anchor" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="config-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.slider.MultiSlider-animate"></a><b><a href="source/Slider.html#cfg-Ext.slider.MultiSlider-animate">animate</a></b> : Boolean<div class="mdesc">Turn on or off animation. Defaults to true</div></td><td class="msource">MultiSlider</td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-applyTo"></a><b><a href="source/Component.html#cfg-Ext.Component-applyTo">applyTo</a></b> : Mixed<div class="mdesc"><div class="short">Specify the id of the element, a DOM element or an existing Element corresponding to a DIV
32that is already present in...</div><div class="long"><p>Specify the id of the element, a DOM element or an existing Element corresponding to a DIV
33that is already present in the document that specifies some structural markup for this
34component.</p><div><ul>
35<li><b>Description</b> : <ul>
36<div class="sub-desc">When <tt>applyTo</tt> is used, constituent parts of the component can also be specified
37by id or CSS class name within the main element, and the component being created may attempt
38to create its subcomponents from that markup if applicable.</div>
39</ul></li>
40<li><b>Notes</b> : <ul>
41<div class="sub-desc">When using this config, a call to render() is not required.</div>
42<div class="sub-desc">If applyTo is specified, any value passed for <a href="output/Ext.Component.html#Ext.Component-renderTo" ext:member="renderTo" ext:cls="Ext.Component">renderTo</a> will be ignored and the target
43element's parent node will automatically be used as the component's container.</div>
44</ul></li>
45</ul></div></div></div></td><td class="msource"><a href="output/Ext.Component.html#applyTo" ext:member="#applyTo" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-autoEl"></a><b><a href="source/Component.html#cfg-Ext.Component-autoEl">autoEl</a></b> : Mixed<div class="mdesc"><div class="short">A tag name or DomHelper spec used to create the Element which will
46encapsulate this Component.
47You do not normally ne...</div><div class="long"><p>A tag name or <a href="output/Ext.DomHelper.html" ext:cls="Ext.DomHelper">DomHelper</a> spec used to create the <a href="output/Ext.Component.html#Ext.Component-getEl" ext:member="getEl" ext:cls="Ext.Component">Element</a> which will
48encapsulate this Component.</p>
49<p>You do not normally need to specify this. For the base classes <a href="output/Ext.Component.html" ext:cls="Ext.Component">Ext.Component</a>, <a href="output/Ext.BoxComponent.html" ext:cls="Ext.BoxComponent">Ext.BoxComponent</a>,
50and <a href="output/Ext.Container.html" ext:cls="Ext.Container">Ext.Container</a>, this defaults to <b><tt>'div'</tt></b>. The more complex Ext classes use a more complex
51DOM structure created by their own onRender methods.</p>
52<p>This is intended to allow the developer to create application-specific utility Components encapsulated by
53different DOM elements. Example usage:</p><pre><code>{
54 xtype: <em>'box'</em>,
55 autoEl: {
56 tag: <em>'img'</em>,
57 src: <em>'http:<i>//www.example.com/example.jpg'</em></i>
58 }
59}, {
60 xtype: <em>'box'</em>,
61 autoEl: {
62 tag: <em>'blockquote'</em>,
63 html: <em>'autoEl is cool!'</em>
64 }
65}, {
66 xtype: <em>'container'</em>,
67 autoEl: <em>'ul'</em>,
68 cls: <em>'ux-unordered-list'</em>,
69 items: {
70 xtype: <em>'box'</em>,
71 autoEl: <em>'li'</em>,
72 html: <em>'First list item'</em>
73 }
74}</code></pre></div></div></td><td class="msource"><a href="output/Ext.Component.html#autoEl" ext:member="#autoEl" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-autoHeight"></a><b><a href="source/BoxComponent.html#cfg-Ext.BoxComponent-autoHeight">autoHeight</a></b> : Boolean<div class="mdesc"><div class="short">True to use height:'auto', false to use fixed height (or allow it to be managed by its parent
75Container's layout mana...</div><div class="long"><p>True to use height:'auto', false to use fixed height (or allow it to be managed by its parent
76Container's <a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">layout manager</a>. Defaults to false.</p>
77<p><b>Note</b>: Although many components inherit this config option, not all will
78function as expected with a height of 'auto'. Setting autoHeight:true means that the
79browser will manage height based on the element's contents, and that Ext will not manage it at all.</p>
80<p>If the <i>browser</i> is managing the height, be aware that resizes performed by the browser in response
81to changes within the structure of the Component cannot be detected. Therefore changes to the height might
82result in elements needing to be synchronized with the new height. Example:</p><pre><code><b>var</b> w = <b>new</b> Ext.Window({
83 title: <em>'Window'</em>,
84 width: 600,
85 autoHeight: true,
86 items: {
87 title: <em>'Collapse Me'</em>,
88 height: 400,
89 collapsible: true,
90 border: false,
91 listeners: {
92 beforecollapse: <b>function</b>() {
93 w.el.shadow.hide();
94 },
95 beforeexpand: <b>function</b>() {
96 w.el.shadow.hide();
97 },
98 collapse: <b>function</b>() {
99 w.syncShadow();
100 },
101 expand: <b>function</b>() {
102 w.syncShadow();
103 }
104 }
105 }
106}).show();</code></pre></div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#autoHeight" ext:member="#autoHeight" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-autoScroll"></a><b><a href="source/BoxComponent.html#cfg-Ext.BoxComponent-autoScroll">autoScroll</a></b> : Boolean<div class="mdesc"><div class="short">true to use overflow:'auto' on the components layout element and show scroll bars automatically when
107necessary, false...</div><div class="long"><code>true</code> to use overflow:'auto' on the components layout element and show scroll bars automatically when
108necessary, <code>false</code> to clip any overflowing content (defaults to <code>false</code>).</div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#autoScroll" ext:member="#autoScroll" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-autoShow"></a><b><a href="source/Component.html#cfg-Ext.Component-autoShow">autoShow</a></b> : Boolean<div class="mdesc"><div class="short">True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove
109them on render...</div><div class="long">True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove
110them on render (defaults to false).</div></div></td><td class="msource"><a href="output/Ext.Component.html#autoShow" ext:member="#autoShow" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-autoWidth"></a><b><a href="source/BoxComponent.html#cfg-Ext.BoxComponent-autoWidth">autoWidth</a></b> : Boolean<div class="mdesc"><div class="short">True to use width:'auto', false to use fixed width (or allow it to be managed by its parent
111Container's layout manage...</div><div class="long"><p>True to use width:'auto', false to use fixed width (or allow it to be managed by its parent
112Container's <a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">layout manager</a>. Defaults to false.</p>
113<p><b>Note</b>: Although many components inherit this config option, not all will
114function as expected with a width of 'auto'. Setting autoWidth:true means that the
115browser will manage width based on the element's contents, and that Ext will not manage it at all.</p>
116<p>If the <i>browser</i> is managing the width, be aware that resizes performed by the browser in response
117to changes within the structure of the Component cannot be detected. Therefore changes to the width might
118result in elements needing to be synchronized with the new width. For example, where the target element is:</p><pre><code><div id=<em>'grid-container'</em> style=<em>'margin-left:25%;width:50%'</em>></div></code></pre>
119A Panel rendered into that target element must listen for browser window resize in order to relay its
120child items when the browser changes its width:<pre><code><b>var</b> myPanel = <b>new</b> Ext.Panel({
121 renderTo: <em>'grid-container'</em>,
122 monitorResize: true, <i>// relay on browser resize</i>
123 title: <em>'Panel'</em>,
124 height: 400,
125 autoWidth: true,
126 layout: <em>'hbox'</em>,
127 layoutConfig: {
128 align: <em>'stretch'</em>
129 },
130 defaults: {
131 flex: 1
132 },
133 items: [{
134 title: <em>'Box 1'</em>,
135 }, {
136 title: <em>'Box 2'</em>
137 }, {
138 title: <em>'Box 3'</em>
139 }],
140});</code></pre></div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#autoWidth" ext:member="#autoWidth" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-boxMaxHeight"></a><b><a href="source/BoxComponent.html#cfg-Ext.BoxComponent-boxMaxHeight">boxMaxHeight</a></b> : Number<div class="mdesc"><div class="short">The maximum value in pixels which this BoxComponent will set its height to.
141Warning: This will override any size mana...</div><div class="long"><p>The maximum value in pixels which this BoxComponent will set its height to.</p>
142<p><b>Warning:</b> This will override any size management applied by layout managers.</p></div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#boxMaxHeight" ext:member="#boxMaxHeight" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-boxMaxWidth"></a><b><a href="source/BoxComponent.html#cfg-Ext.BoxComponent-boxMaxWidth">boxMaxWidth</a></b> : Number<div class="mdesc"><div class="short">The maximum value in pixels which this BoxComponent will set its width to.
143Warning: This will override any size manag...</div><div class="long"><p>The maximum value in pixels which this BoxComponent will set its width to.</p>
144<p><b>Warning:</b> This will override any size management applied by layout managers.</p></div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#boxMaxWidth" ext:member="#boxMaxWidth" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-boxMinHeight"></a><b><a href="source/BoxComponent.html#cfg-Ext.BoxComponent-boxMinHeight">boxMinHeight</a></b> : Number<div class="mdesc"><div class="short">The minimum value in pixels which this BoxComponent will set its height to.
145Warning: This will override any size mana...</div><div class="long"><p>The minimum value in pixels which this BoxComponent will set its height to.</p>
146<p><b>Warning:</b> This will override any size management applied by layout managers.</p></div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#boxMinHeight" ext:member="#boxMinHeight" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-boxMinWidth"></a><b><a href="source/BoxComponent.html#cfg-Ext.BoxComponent-boxMinWidth">boxMinWidth</a></b> : Number<div class="mdesc"><div class="short">The minimum value in pixels which this BoxComponent will set its width to.
147Warning: This will override any size manag...</div><div class="long"><p>The minimum value in pixels which this BoxComponent will set its width to.</p>
148<p><b>Warning:</b> This will override any size management applied by layout managers.</p></div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#boxMinWidth" ext:member="#boxMinWidth" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-bubbleEvents"></a><b><a href="source/Component.html#cfg-Ext.Component-bubbleEvents">bubbleEvents</a></b> : Array<div class="mdesc"><div class="short">An array of events that, when fired, should be bubbled to any parent container.
149See Ext.util.Observable.enableBubble....</div><div class="long"><p>An array of events that, when fired, should be bubbled to any parent container.
150See <a href="output/Ext.util.Observable.html#Ext.util.Observable-enableBubble" ext:member="enableBubble" ext:cls="Ext.util.Observable">Ext.util.Observable.enableBubble</a>.
151Defaults to <tt>[]</tt>.</div></div></td><td class="msource"><a href="output/Ext.Component.html#bubbleEvents" ext:member="#bubbleEvents" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-clearCls"></a><b><a href="source/Component.html#cfg-Ext.Component-clearCls">clearCls</a></b> : String<div class="mdesc"><div class="short">The CSS class used to to apply to the special clearing div rendered
152directly after each form field wrapper to provide...</div><div class="long"><p>The CSS class used to to apply to the special clearing div rendered
153directly after each form field wrapper to provide field clearing (defaults to
154<tt>'x-form-clear-left'</tt>).</p>
155<br><p><b>Note</b>: this config is only used when this Component is rendered by a Container
156which has been configured to use the <b><a href="output/Ext.layout.FormLayout.html" ext:cls="Ext.layout.FormLayout">FormLayout</a></b> layout
157manager (e.g. <a href="output/Ext.form.FormPanel.html" ext:cls="Ext.form.FormPanel">Ext.form.FormPanel</a> or specifying <tt>layout:'form'</tt>) and either a
158<tt><a href="output/Ext.Component.html#Ext.Component-fieldLabel" ext:member="fieldLabel" ext:cls="Ext.Component">fieldLabel</a></tt> is specified or <tt>isFormField=true</tt> is specified.</p><br>
159<p>See <a href="output/Ext.layout.FormLayout.html" ext:cls="Ext.layout.FormLayout">Ext.layout.FormLayout</a>.<a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-fieldTpl" ext:member="fieldTpl" ext:cls="Ext.layout.FormLayout">fieldTpl</a> also.</p></div></div></td><td class="msource"><a href="output/Ext.Component.html#clearCls" ext:member="#clearCls" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.slider.MultiSlider-clickToChange"></a><b><a href="source/Slider.html#cfg-Ext.slider.MultiSlider-clickToChange">clickToChange</a></b> : Boolean<div class="mdesc">Determines whether or not clicking on the Slider axis will change the slider. Defaults to true</div></td><td class="msource">MultiSlider</td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-cls"></a><b><a href="source/Component.html#cfg-Ext.Component-cls">cls</a></b> : String<div class="mdesc"><div class="short">An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be
160useful for ...</div><div class="long">An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be
161useful for adding customized styles to the component or any of its children using standard CSS rules.</div></div></td><td class="msource"><a href="output/Ext.Component.html#cls" ext:member="#cls" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.slider.MultiSlider-constrainThumbs"></a><b><a href="source/Slider.html#cfg-Ext.slider.MultiSlider-constrainThumbs">constrainThumbs</a></b> : Boolean<div class="mdesc">True to disallow thumbs from overlapping one another. Defaults to true</div></td><td class="msource">MultiSlider</td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-contentEl"></a><b><a href="source/Component.html#cfg-Ext.Component-contentEl">contentEl</a></b> : String<div class="mdesc"><div class="short">Optional. Specify an existing HTML element, or the id of an existing HTML element to use as the content
162for this comp...</div><div class="long"><p>Optional. Specify an existing HTML element, or the <code>id</code> of an existing HTML element to use as the content
163for this component.</p>
164<ul>
165<li><b>Description</b> :
166<div class="sub-desc">This config option is used to take an existing HTML element and place it in the layout element
167of a new component (it simply moves the specified DOM element <i>after the Component is rendered</i> to use as the content.</div></li>
168<li><b>Notes</b> :
169<div class="sub-desc">The specified HTML element is appended to the layout element of the component <i>after any configured
170<a href="output/Ext.Component.html#Ext.Component-html" ext:member="html" ext:cls="Ext.Component">HTML</a> has been inserted</i>, and so the document will not contain this element at the time the <a href="output/Ext.Component.html#Ext.Component-render" ext:member="render" ext:cls="Ext.Component">render</a> event is fired.</div>
171<div class="sub-desc">The specified HTML element used will not participate in any <code><b><a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">layout</a></b></code>
172scheme that the Component may use. It is just HTML. Layouts operate on child <code><b><a href="output/Ext.Container.html#Ext.Container-items" ext:member="items" ext:cls="Ext.Container">items</a></b></code>.</div>
173<div class="sub-desc">Add either the <code>x-hidden</code> or the <code>x-hide-display</code> CSS class to
174prevent a brief flicker of the content before it is rendered to the panel.</div></li>
175</ul></div></div></td><td class="msource"><a href="output/Ext.Component.html#contentEl" ext:member="#contentEl" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-ctCls"></a><b><a href="source/Component.html#cfg-Ext.Component-ctCls">ctCls</a></b> : String<div class="mdesc"><div class="short">An optional extra CSS class that will be added to this component's container. This can be useful for
176adding customize...</div><div class="long"><p>An optional extra CSS class that will be added to this component's container. This can be useful for
177adding customized styles to the container or any of its children using standard CSS rules. See
178<a href="output/Ext.layout.ContainerLayout.html" ext:cls="Ext.layout.ContainerLayout">Ext.layout.ContainerLayout</a>.<a href="output/Ext.layout.ContainerLayout.html#Ext.layout.ContainerLayout-extraCls" ext:member="extraCls" ext:cls="Ext.layout.ContainerLayout">extraCls</a> also.</p>
179<p><b>Note</b>: <tt>ctCls</tt> defaults to <tt>''</tt> except for the following class
180which assigns a value by default:
181<div class="mdetail-params"><ul>
182<li><a href="output/Ext.layout.Box.html" ext:cls="Ext.layout.Box">Box Layout</a> : <tt>'x-box-layout-ct'</tt></li>
183</ul></div>
184To configure the above Class with an extra CSS class append to the default. For example,
185for BoxLayout (Hbox and Vbox):<pre><code>ctCls: <em>'x-box-layout-ct custom-class'</em></code></pre>
186</p></div></div></td><td class="msource"><a href="output/Ext.Component.html#ctCls" ext:member="#ctCls" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-data"></a><b><a href="source/Component.html#cfg-Ext.Component-data">data</a></b> : Mixed<div class="mdesc">The initial set of data to apply to the <code><a href="output/Ext.Component.html#Ext.Component-tpl" ext:member="tpl" ext:cls="Ext.Component">tpl</a></code> to
187update the content area of the Component.</div></td><td class="msource"><a href="output/Ext.Component.html#data" ext:member="#data" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.slider.MultiSlider-decimalPrecision."></a><b><a href="source/Slider.html#cfg-Ext.slider.MultiSlider-decimalPrecision.">decimalPrecision.</a></b> : Number/Boolean<div class="mdesc"><div class="short">The number of decimal places to which to round the Slider's value. Defaults to 0.
188To disable rounding, configure as f...</div><div class="long"><p>The number of decimal places to which to round the Slider's value. Defaults to 0.</p>
189<p>To disable rounding, configure as <tt><b>false</b></tt>.</p></div></div></td><td class="msource">MultiSlider</td></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-disabled"></a><b><a href="source/Component.html#cfg-Ext.Component-disabled">disabled</a></b> : Boolean<div class="mdesc">Render this component disabled (default is false).</div></td><td class="msource"><a href="output/Ext.Component.html#disabled" ext:member="#disabled" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-disabledClass"></a><b><a href="source/Component.html#cfg-Ext.Component-disabledClass">disabledClass</a></b> : String<div class="mdesc">CSS class added to the component when it is disabled (defaults to 'x-item-disabled').</div></td><td class="msource"><a href="output/Ext.Component.html#disabledClass" ext:member="#disabledClass" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-fieldLabel"></a><b><a href="source/Component.html#cfg-Ext.Component-fieldLabel">fieldLabel</a></b> : String<div class="mdesc"><div class="short">The label text to display next to this Component (defaults to '').
190Note: this config is only used when this Component...</div><div class="long"><p>The label text to display next to this Component (defaults to '').</p>
191<br><p><b>Note</b>: this config is only used when this Component is rendered by a Container which
192has been configured to use the <b><a href="output/Ext.layout.FormLayout.html" ext:cls="Ext.layout.FormLayout">FormLayout</a></b> layout manager (e.g.
193<a href="output/Ext.form.FormPanel.html" ext:cls="Ext.form.FormPanel">Ext.form.FormPanel</a> or specifying <tt>layout:'form'</tt>).</p><br>
194<p>Also see <tt><a href="output/Ext.Component.html#Ext.Component-hideLabel" ext:member="hideLabel" ext:cls="Ext.Component">hideLabel</a></tt> and
195<a href="output/Ext.layout.FormLayout.html" ext:cls="Ext.layout.FormLayout">Ext.layout.FormLayout</a>.<a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-fieldTpl" ext:member="fieldTpl" ext:cls="Ext.layout.FormLayout">fieldTpl</a>.</p>
196Example use:<pre><code><b>new</b> Ext.FormPanel({
197 height: 100,
198 renderTo: Ext.getBody(),
199 items: [{
200 xtype: <em>'textfield'</em>,
201 fieldLabel: <em>'Name'</em>
202 }]
203});</code></pre></div></div></td><td class="msource"><a href="output/Ext.Component.html#fieldLabel" ext:member="#fieldLabel" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-flex"></a><b><a href="source/BoxComponent.html#cfg-Ext.BoxComponent-flex">flex</a></b> : Number<div class="mdesc"><div class="short">Note: this config is only used when this Component is rendered
204by a Container which has been configured to use a BoxL...</div><div class="long"><p><b>Note</b>: this config is only used when this Component is rendered
205by a Container which has been configured to use a <b><a href="output/Ext.layout.BoxLayout.html" ext:cls="Ext.layout.BoxLayout">BoxLayout</a>.</b>
206Each child Component with a <code>flex</code> property will be flexed either vertically (by a VBoxLayout)
207or horizontally (by an HBoxLayout) according to the item's <b>relative</b> <code>flex</code> value
208compared to the sum of all Components with <code>flex</flex> value specified. Any child items that have
209either a <code>flex = 0</code> or <code>flex = undefined</code> will not be 'flexed' (the initial size will not be changed).</div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#flex" ext:member="#flex" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-height"></a><b><a href="source/BoxComponent.html#cfg-Ext.BoxComponent-height">height</a></b> : Number<div class="mdesc"><div class="short">The height of this component in pixels (defaults to auto).
210Note to express this dimension as a percentage or offset s...</div><div class="long">The height of this component in pixels (defaults to auto).
211<b>Note</b> to express this dimension as a percentage or offset see <a href="output/Ext.Component.html#Ext.Component-anchor" ext:member="anchor" ext:cls="Ext.Component">Ext.Component.anchor</a>.</div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#height" ext:member="#height" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-hidden"></a><b><a href="source/Component.html#cfg-Ext.Component-hidden">hidden</a></b> : Boolean<div class="mdesc">Render this component hidden (default is false). If <tt>true</tt>, the
212<a href="output/Ext.Component.html#Ext.Component-hide" ext:member="hide" ext:cls="Ext.Component">hide</a> method will be called internally.</div></td><td class="msource"><a href="output/Ext.Component.html#hidden" ext:member="#hidden" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-hideLabel"></a><b><a href="source/Component.html#cfg-Ext.Component-hideLabel">hideLabel</a></b> : Boolean<div class="mdesc"><div class="short">true to completely hide the label element
213(label and separator). Defaults to false.
214By default, even if you do not sp...</div><div class="long"><p><tt>true</tt> to completely hide the label element
215(<a href="output/Ext.Component.html#Ext.Component-fieldLabel" ext:member="fieldLabel" ext:cls="Ext.Component">label</a> and <a href="output/Ext.Component.html#Ext.Component-labelSeparator" ext:member="labelSeparator" ext:cls="Ext.Component">separator</a>). Defaults to <tt>false</tt>.
216By default, even if you do not specify a <tt><a href="output/Ext.Component.html#Ext.Component-fieldLabel" ext:member="fieldLabel" ext:cls="Ext.Component">fieldLabel</a></tt> the space will still be
217reserved so that the field will line up with other fields that do have labels.
218Setting this to <tt>true</tt> will cause the field to not reserve that space.</p>
219<br><p><b>Note</b>: see the note for <tt><a href="output/Ext.Component.html#Ext.Component-clearCls" ext:member="clearCls" ext:cls="Ext.Component">clearCls</a></tt>.</p><br>
220Example use:<pre><code><b>new</b> Ext.FormPanel({
221 height: 100,
222 renderTo: Ext.getBody(),
223 items: [{
224 xtype: <em>'textfield'</em>
225 hideLabel: true
226 }]
227});</code></pre></div></div></td><td class="msource"><a href="output/Ext.Component.html#hideLabel" ext:member="#hideLabel" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-hideMode"></a><b><a href="source/Component.html#cfg-Ext.Component-hideMode">hideMode</a></b> : String<div class="mdesc"><div class="short">How this component should be hidden. Supported values are 'visibility'
228(css visibility), 'offsets' (negative offset p...</div><div class="long"><p>How this component should be hidden. Supported values are <tt>'visibility'</tt>
229(css visibility), <tt>'offsets'</tt> (negative offset position) and <tt>'display'</tt>
230(css display).</p>
231<br><p><b>Note</b>: the default of <tt>'display'</tt> is generally preferred
232since items are automatically laid out when they are first shown (no sizing
233is done while hidden).</p></div></div></td><td class="msource"><a href="output/Ext.Component.html#hideMode" ext:member="#hideMode" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-hideParent"></a><b><a href="source/Component.html#cfg-Ext.Component-hideParent">hideParent</a></b> : Boolean<div class="mdesc"><div class="short">True to hide and show the component's container when hide/show is called on the component, false to hide
234and show the...</div><div class="long">True to hide and show the component's container when hide/show is called on the component, false to hide
235and show the component itself (defaults to false). For example, this can be used as a shortcut for a hide
236button on a window by setting hide:true on the button when adding it to its parent container.</div></div></td><td class="msource"><a href="output/Ext.Component.html#hideParent" ext:member="#hideParent" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-html"></a><b><a href="source/Component.html#cfg-Ext.Component-html">html</a></b> : String/Object<div class="mdesc"><div class="short">An HTML fragment, or a DomHelper specification to use as the layout element
237content (defaults to ''). The HTML conten...</div><div class="long">An HTML fragment, or a <a href="output/Ext.DomHelper.html" ext:cls="Ext.DomHelper">DomHelper</a> specification to use as the layout element
238content (defaults to ''). The HTML content is added after the component is rendered,
239so the document will not contain this HTML at the time the <a href="output/Ext.Component.html#Ext.Component-render" ext:member="render" ext:cls="Ext.Component">render</a> event is fired.
240This content is inserted into the body <i>before</i> any configured <a href="output/Ext.Component.html#Ext.Component-contentEl" ext:member="contentEl" ext:cls="Ext.Component">contentEl</a> is appended.</div></div></td><td class="msource"><a href="output/Ext.Component.html#html" ext:member="#html" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-id"></a><b><a href="source/Component.html#cfg-Ext.Component-id">id</a></b> : String<div class="mdesc"><div class="short">The unique id of this component (defaults to an auto-assigned id).
241You should assign an id if you need to be able to ...</div><div class="long"><p>The <b>unique</b> id of this component (defaults to an <a href="output/Ext.Component.html#Ext.Component-getId" ext:member="getId" ext:cls="Ext.Component">auto-assigned id</a>).
242You should assign an id if you need to be able to access the component later and you do
243not have an object reference available (e.g., using <a href="output/Ext.html" ext:cls="Ext">Ext</a>.<a href="output/Ext.html#Ext-getCmp" ext:member="getCmp" ext:cls="Ext">getCmp</a>).</p>
244<p>Note that this id will also be used as the element id for the containing HTML element
245that is rendered to the page for this component. This allows you to write id-based CSS
246rules to style the specific instance of this component uniquely, and also to select
247sub-elements using this component's id as the parent.</p>
248<p><b>Note</b>: to avoid complications imposed by a unique <tt>id</tt> also see
249<code><a href="output/Ext.Component.html#Ext.Component-itemId" ext:member="itemId" ext:cls="Ext.Component">itemId</a></code> and <code><a href="output/Ext.Component.html#Ext.Component-ref" ext:member="ref" ext:cls="Ext.Component">ref</a></code>.</p>
250<p><b>Note</b>: to access the container of an item see <code><a href="output/Ext.Component.html#Ext.Component-ownerCt" ext:member="ownerCt" ext:cls="Ext.Component">ownerCt</a></code>.</p></div></div></td><td class="msource"><a href="output/Ext.Component.html#id" ext:member="#id" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.slider.MultiSlider-increment"></a><b><a href="source/Slider.html#cfg-Ext.slider.MultiSlider-increment">increment</a></b> : Number<div class="mdesc">How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'.</div></td><td class="msource">MultiSlider</td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-itemCls"></a><b><a href="source/Component.html#cfg-Ext.Component-itemCls">itemCls</a></b> : String<div class="mdesc"><div class="short">Note: this config is only used when this Component is rendered by a Container which
251has been configured to use the Fo...</div><div class="long"><p><b>Note</b>: this config is only used when this Component is rendered by a Container which
252has been configured to use the <b><a href="output/Ext.layout.FormLayout.html" ext:cls="Ext.layout.FormLayout">FormLayout</a></b> layout manager (e.g.
253<a href="output/Ext.form.FormPanel.html" ext:cls="Ext.form.FormPanel">Ext.form.FormPanel</a> or specifying <tt>layout:'form'</tt>).</p><br>
254<p>An additional CSS class to apply to the div wrapping the form item
255element of this field. If supplied, <tt>itemCls</tt> at the <b>field</b> level will override
256the default <tt>itemCls</tt> supplied at the <b>container</b> level. The value specified for
257<tt>itemCls</tt> will be added to the default class (<tt>'x-form-item'</tt>).</p>
258<p>Since it is applied to the item wrapper (see
259<a href="output/Ext.layout.FormLayout.html" ext:cls="Ext.layout.FormLayout">Ext.layout.FormLayout</a>.<a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-fieldTpl" ext:member="fieldTpl" ext:cls="Ext.layout.FormLayout">fieldTpl</a>), it allows
260you to write standard CSS rules that can apply to the field, the label (if specified), or
261any other element within the markup for the field.</p>
262<br><p><b>Note</b>: see the note for <tt><a href="output/Ext.Component.html#Ext.Component-fieldLabel" ext:member="fieldLabel" ext:cls="Ext.Component">fieldLabel</a></tt>.</p><br>
263Example use:<pre><code><i>// Apply a style to the field's <b>label</b>:</i>
264<style>
265 .required .x-form-item-<b>label</b> {font-weight:bold;color:red;}
266</style>
267
268<b>new</b> Ext.FormPanel({
269 height: 100,
270 renderTo: Ext.getBody(),
271 items: [{
272 xtype: <em>'textfield'</em>,
273 fieldLabel: <em>'Name'</em>,
274 itemCls: <em>'required'</em> <i>//this <b>label</b> will be styled</i>
275 },{
276 xtype: <em>'textfield'</em>,
277 fieldLabel: <em>'Favorite Color'</em>
278 }]
279});</code></pre></div></div></td><td class="msource"><a href="output/Ext.Component.html#itemCls" ext:member="#itemCls" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-itemId"></a><b><a href="source/Component.html#cfg-Ext.Component-itemId">itemId</a></b> : String<div class="mdesc"><div class="short">An itemId can be used as an alternative way to get a reference to a component
280when no object reference is available. ...</div><div class="long"><p>An <tt>itemId</tt> can be used as an alternative way to get a reference to a component
281when no object reference is available. Instead of using an <code><a href="output/Ext.Component.html#Ext.Component-id" ext:member="id" ext:cls="Ext.Component">id</a></code> with
282<a href="output/Ext.html" ext:cls="Ext">Ext</a>.<a href="output/Ext.html#Ext-getCmp" ext:member="getCmp" ext:cls="Ext">getCmp</a>, use <code>itemId</code> with
283<a href="output/Ext.Container.html" ext:cls="Ext.Container">Ext.Container</a>.<a href="output/Ext.Container.html#Ext.Container-getComponent" ext:member="getComponent" ext:cls="Ext.Container">getComponent</a> which will retrieve
284<code>itemId</code>'s or <tt><a href="output/Ext.Component.html#Ext.Component-id" ext:member="id" ext:cls="Ext.Component">id</a></tt>'s. Since <code>itemId</code>'s are an index to the
285container's internal MixedCollection, the <code>itemId</code> is scoped locally to the container --
286avoiding potential conflicts with <a href="output/Ext.ComponentMgr.html" ext:cls="Ext.ComponentMgr">Ext.ComponentMgr</a> which requires a <b>unique</b>
287<code><a href="output/Ext.Component.html#Ext.Component-id" ext:member="id" ext:cls="Ext.Component">id</a></code>.</p>
288<pre><code><b>var</b> c = <b>new</b> Ext.Panel({ <i>//</i>
289 <a href="output/Ext.BoxComponent.html#Ext.BoxComponent-height" ext:member="height" ext:cls="Ext.BoxComponent">height</a>: 300,
290 <a href="output/Ext.Component.html#Ext.Component-renderTo" ext:member="renderTo" ext:cls="Ext.Component">renderTo</a>: document.body,
291 <a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">layout</a>: <em>'auto'</em>,
292 <a href="output/Ext.Container.html#Ext.Container-items" ext:member="items" ext:cls="Ext.Container">items</a>: [
293 {
294 itemId: <em>'p1'</em>,
295 <a href="output/Ext.Panel.html#Ext.Panel-title" ext:member="title" ext:cls="Ext.Panel">title</a>: <em>'Panel 1'</em>,
296 <a href="output/Ext.BoxComponent.html#Ext.BoxComponent-height" ext:member="height" ext:cls="Ext.BoxComponent">height</a>: 150
297 },
298 {
299 itemId: <em>'p2'</em>,
300 <a href="output/Ext.Panel.html#Ext.Panel-title" ext:member="title" ext:cls="Ext.Panel">title</a>: <em>'Panel 2'</em>,
301 <a href="output/Ext.BoxComponent.html#Ext.BoxComponent-height" ext:member="height" ext:cls="Ext.BoxComponent">height</a>: 150
302 }
303 ]
304})
305p1 = c.<a href="output/Ext.Container.html#Ext.Container-getComponent" ext:member="getComponent" ext:cls="Ext.Container">getComponent</a>(<em>'p1'</em>); <i>// not the same as <a href="output/Ext.html#Ext-getCmp" ext:member="getCmp" ext:cls="Ext">Ext.getCmp()</a></i>
306p2 = p1.<a href="output/Ext.Component.html#Ext.Component-ownerCt" ext:member="ownerCt" ext:cls="Ext.Component">ownerCt</a>.<a href="output/Ext.Container.html#Ext.Container-getComponent" ext:member="getComponent" ext:cls="Ext.Container">getComponent</a>(<em>'p2'</em>); <i>// reference via a sibling</i></code></pre>
307<p>Also see <tt><a href="output/Ext.Component.html#Ext.Component-id" ext:member="id" ext:cls="Ext.Component">id</a></tt> and <code><a href="output/Ext.Component.html#Ext.Component-ref" ext:member="ref" ext:cls="Ext.Component">ref</a></code>.</p>
308<p><b>Note</b>: to access the container of an item see <tt><a href="output/Ext.Component.html#Ext.Component-ownerCt" ext:member="ownerCt" ext:cls="Ext.Component">ownerCt</a></tt>.</p></div></div></td><td class="msource"><a href="output/Ext.Component.html#itemId" ext:member="#itemId" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.slider.MultiSlider-keyIncrement"></a><b><a href="source/Slider.html#cfg-Ext.slider.MultiSlider-keyIncrement">keyIncrement</a></b> : Number<div class="mdesc"><div class="short">How many units to change the Slider when adjusting with keyboard navigation. Defaults to 1. If the increment config i...</div><div class="long">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.</div></div></td><td class="msource">MultiSlider</td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-labelSeparator"></a><b><a href="source/Component.html#cfg-Ext.Component-labelSeparator">labelSeparator</a></b> : String<div class="mdesc"><div class="short">The separator to display after the text of each
309fieldLabel. This property may be configured at various levels.
310The o...</div><div class="long"><p>The separator to display after the text of each
311<tt><a href="output/Ext.Component.html#Ext.Component-fieldLabel" ext:member="fieldLabel" ext:cls="Ext.Component">fieldLabel</a></tt>. This property may be configured at various levels.
312The order of precedence is:
313<div class="mdetail-params"><ul>
314<li>field / component level</li>
315<li>container level</li>
316<li><a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-labelSeparator" ext:member="labelSeparator" ext:cls="Ext.layout.FormLayout">layout level</a> (defaults to colon <tt>':'</tt>)</li>
317</ul></div>
318To display no separator for this field's label specify empty string ''.</p>
319<br><p><b>Note</b>: see the note for <tt><a href="output/Ext.Component.html#Ext.Component-clearCls" ext:member="clearCls" ext:cls="Ext.Component">clearCls</a></tt>.</p><br>
320<p>Also see <tt><a href="output/Ext.Component.html#Ext.Component-hideLabel" ext:member="hideLabel" ext:cls="Ext.Component">hideLabel</a></tt> and
321<a href="output/Ext.layout.FormLayout.html" ext:cls="Ext.layout.FormLayout">Ext.layout.FormLayout</a>.<a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-fieldTpl" ext:member="fieldTpl" ext:cls="Ext.layout.FormLayout">fieldTpl</a>.</p>
322Example use:<pre><code><b>new</b> Ext.FormPanel({
323 height: 100,
324 renderTo: Ext.getBody(),
325 layoutConfig: {
326 labelSeparator: <em>'~'</em> <i>// layout config has lowest priority (defaults to <em>':'</em>)</i>
327 },
328 <a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-labelSeparator" ext:member="labelSeparator" ext:cls="Ext.layout.FormLayout">labelSeparator</a>: <em>'>>'</em>, <i>// config at container level</i>
329 items: [{
330 xtype: <em>'textfield'</em>,
331 fieldLabel: <em>'Field 1'</em>,
332 labelSeparator: <em>'...'</em> <i>// field/component level config supersedes others</i>
333 },{
334 xtype: <em>'textfield'</em>,
335 fieldLabel: <em>'Field 2'</em> <i>// labelSeparator will be <em>'='</em></i>
336 }]
337});</code></pre></div></div></td><td class="msource"><a href="output/Ext.Component.html#labelSeparator" ext:member="#labelSeparator" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-labelStyle"></a><b><a href="source/Component.html#cfg-Ext.Component-labelStyle">labelStyle</a></b> : String<div class="mdesc"><div class="short">A CSS style specification string to apply directly to this field's
338label. Defaults to the container's labelStyle val...</div><div class="long"><p>A CSS style specification string to apply directly to this field's
339label. Defaults to the container's labelStyle value if set (e.g.,
340<tt><a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-labelStyle" ext:member="labelStyle" ext:cls="Ext.layout.FormLayout">Ext.layout.FormLayout.labelStyle</a></tt> , or '').</p>
341<br><p><b>Note</b>: see the note for <code><a href="output/Ext.Component.html#Ext.Component-clearCls" ext:member="clearCls" ext:cls="Ext.Component">clearCls</a></code>.</p><br>
342<p>Also see <code><a href="output/Ext.Component.html#Ext.Component-hideLabel" ext:member="hideLabel" ext:cls="Ext.Component">hideLabel</a></code> and
343<code><a href="output/Ext.layout.FormLayout.html" ext:cls="Ext.layout.FormLayout">Ext.layout.FormLayout</a>.<a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-fieldTpl" ext:member="fieldTpl" ext:cls="Ext.layout.FormLayout">fieldTpl</a>.</code></p>
344Example use:<pre><code><b>new</b> Ext.FormPanel({
345 height: 100,
346 renderTo: Ext.getBody(),
347 items: [{
348 xtype: <em>'textfield'</em>,
349 fieldLabel: <em>'Name'</em>,
350 labelStyle: <em>'font-weight:bold;'</em>
351 }]
352});</code></pre></div></div></td><td class="msource"><a href="output/Ext.Component.html#labelStyle" ext:member="#labelStyle" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.util.Observable-listeners"></a><b><a href="source/Observable.html#cfg-Ext.util.Observable-listeners">listeners</a></b> : Object<div class="mdesc"><div class="short">A config object containing one or more event handlers to be added to this
353object during initialization. This should ...</div><div class="long"><p>A config object containing one or more event handlers to be added to this
354object during initialization. This should be a valid listeners config object as specified in the
355<a href="output/Ext.util.Observable.html#Ext.util.Observable-addListener" ext:member="addListener" ext:cls="Ext.util.Observable">addListener</a> example for attaching multiple handlers at once.</p>
356<br><p><b><u>DOM events from ExtJs <a href="output/Ext.Component.html" ext:cls="Ext.Component">Components</a></u></b></p>
357<br><p>While <i>some</i> ExtJs Component classes export selected DOM events (e.g. "click", "mouseover" etc), this
358is usually only done when extra value can be added. For example the <a href="output/Ext.DataView.html" ext:cls="Ext.DataView">DataView</a>'s
359<b><code><a href="output/Ext.DataView.html#Ext.DataView-click" ext:member="click" ext:cls="Ext.DataView">click</a></code></b> event passing the node clicked on. To access DOM
360events directly from a Component's HTMLElement, listeners must be added to the <i><a href="output/Ext.Component.html#Ext.Component-getEl" ext:member="getEl" ext:cls="Ext.Component">Element</a></i> after the Component
361has been rendered. A plugin can simplify this step:<pre><code><i>// Plugin is configured <b>with</b> a listeners config object.</i>
362<i>// The Component is appended to the argument list of all handler functions.</i>
363Ext.DomObserver = Ext.extend(Object, {
364 constructor: <b>function</b>(config) {
365 this.listeners = config.listeners ? config.listeners : config;
366 },
367
368 <i>// Component passes itself into plugin's init method</i>
369 init: <b>function</b>(c) {
370 <b>var</b> p, l = this.listeners;
371 <b>for</b> (p <b>in</b> l) {
372 <b>if</b> (Ext.isFunction(l[p])) {
373 l[p] = this.createHandler(l[p], c);
374 } <b>else</b> {
375 l[p].fn = this.createHandler(l[p].fn, c);
376 }
377 }
378
379 <i>// Add the listeners to the Element immediately following the render call</i>
380 c.render = c.render.<a href="output/Function.html#Function-createSequence" ext:member="createSequence" ext:cls="Function">createSequence</a>(<b>function</b>() {
381 <b>var</b> e = c.getEl();
382 <b>if</b> (e) {
383 e.on(l);
384 }
385 });
386 },
387
388 createHandler: <b>function</b>(fn, c) {
389 <b>return</b> <b>function</b>(e) {
390 fn.call(this, e, c);
391 };
392 }
393});
394
395<b>var</b> combo = <b>new</b> Ext.form.ComboBox({
396
397 <i>// Collapse combo when its element is clicked on</i>
398 plugins: [ <b>new</b> Ext.DomObserver({
399 click: <b>function</b>(evt, comp) {
400 comp.collapse();
401 }
402 })],
403 store: myStore,
404 typeAhead: true,
405 mode: <em>'local'</em>,
406 triggerAction: <em>'all'</em>
407});</code></pre></p></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#listeners" ext:member="#listeners" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-margins"></a><b><a href="source/BoxComponent.html#cfg-Ext.BoxComponent-margins">margins</a></b> : Object<div class="mdesc"><div class="short">Note: this config is only used when this BoxComponent is rendered
408by a Container which has been configured to use the...</div><div class="long"><p><b>Note</b>: this config is only used when this BoxComponent is rendered
409by a Container which has been configured to use the <b><a href="output/Ext.layout.BorderLayout.html" ext:cls="Ext.layout.BorderLayout">BorderLayout</a></b>
410or one of the two <b><a href="output/Ext.layout.BoxLayout.html" ext:cls="Ext.layout.BoxLayout">BoxLayout</a> subclasses.</b></p>
411<p>An object containing margins to apply to this BoxComponent in the
412format:</p><pre><code>{
413 top: (top margin),
414 right: (right margin),
415 bottom: (bottom margin),
416 left: (left margin)
417}</code></pre>
418<p>May also be a string containing space-separated, numeric margin values. The order of the
419sides associated with each value matches the way CSS processes margin values:</p>
420<p><div class="mdetail-params"><ul>
421<li>If there is only one value, it applies to all sides.</li>
422<li>If there are two values, the top and bottom borders are set to the first value and the
423right and left are set to the second.</li>
424<li>If there are three values, the top is set to the first value, the left and right are set
425to the second, and the bottom is set to the third.</li>
426<li>If there are four values, they apply to the top, right, bottom, and left, respectively.</li>
427</ul></div></p>
428<p>Defaults to:</p><pre><code>{top:0, right:0, bottom:0, left:0}</code></pre></div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#margins" ext:member="#margins" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="config-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.slider.MultiSlider-maxValue"></a><b><a href="source/Slider.html#cfg-Ext.slider.MultiSlider-maxValue">maxValue</a></b> : Number<div class="mdesc">The maximum value for the Slider. Defaults to 100.</div></td><td class="msource">MultiSlider</td></tr><tr class="config-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.slider.MultiSlider-minValue"></a><b><a href="source/Slider.html#cfg-Ext.slider.MultiSlider-minValue">minValue</a></b> : Number<div class="mdesc">The minimum value for the Slider. Defaults to 0.</div></td><td class="msource">MultiSlider</td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-overCls"></a><b><a href="source/Component.html#cfg-Ext.Component-overCls">overCls</a></b> : String<div class="mdesc"><div class="short">An optional extra CSS class that will be added to this component's Element when the mouse moves
429over the Element, and...</div><div class="long">An optional extra CSS class that will be added to this component's Element when the mouse moves
430over the Element, and removed when the mouse moves out. (defaults to ''). This can be
431useful for adding customized 'active' or 'hover' styles to the component or any of its children using standard CSS rules.</div></div></td><td class="msource"><a href="output/Ext.Component.html#overCls" ext:member="#overCls" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-pageX"></a><b><a href="source/BoxComponent.html#cfg-Ext.BoxComponent-pageX">pageX</a></b> : Number<div class="mdesc">The page level x coordinate for this component if contained within a positioning container.</div></td><td class="msource"><a href="output/Ext.BoxComponent.html#pageX" ext:member="#pageX" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-pageY"></a><b><a href="source/BoxComponent.html#cfg-Ext.BoxComponent-pageY">pageY</a></b> : Number<div class="mdesc">The page level y coordinate for this component if contained within a positioning container.</div></td><td class="msource"><a href="output/Ext.BoxComponent.html#pageY" ext:member="#pageY" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-plugins"></a><b><a href="source/Component.html#cfg-Ext.Component-plugins">plugins</a></b> : Object/Array<div class="mdesc"><div class="short">An object or array of objects that will provide custom functionality for this component. The only
432requirement for a ...</div><div class="long">An object or array of objects that will provide custom functionality for this component. The only
433requirement for a valid plugin is that it contain an init method that accepts a reference of type Ext.Component.
434When a component is created, if any plugins are available, the component will call the init method on each
435plugin, passing a reference to itself. Each plugin can then call methods or respond to events on the
436component as needed to provide its functionality.</div></div></td><td class="msource"><a href="output/Ext.Component.html#plugins" ext:member="#plugins" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-ptype"></a><b><a href="source/Component.html#cfg-Ext.Component-ptype">ptype</a></b> : String<div class="mdesc"><div class="short">The registered ptype to create. This config option is not used when passing
437a config object into a constructor. This ...</div><div class="long">The registered <tt>ptype</tt> to create. This config option is not used when passing
438a config object into a constructor. This config option is used only when
439lazy instantiation is being used, and a Plugin is being
440specified not as a fully instantiated Component, but as a <i>Component config
441object</i>. The <tt>ptype</tt> will be looked up at render time up to determine what
442type of Plugin to create.<br><br>
443If you create your own Plugins, you may register them using
444<a href="output/Ext.ComponentMgr.html#Ext.ComponentMgr-registerPlugin" ext:member="registerPlugin" ext:cls="Ext.ComponentMgr">Ext.ComponentMgr.registerPlugin</a> in order to be able to
445take advantage of lazy instantiation and rendering.</div></div></td><td class="msource"><a href="output/Ext.Component.html#ptype" ext:member="#ptype" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-ref"></a><b><a href="source/Component.html#cfg-Ext.Component-ref">ref</a></b> : String<div class="mdesc"><div class="short">A path specification, relative to the Component's ownerCt
446specifying into which ancestor Container to place a named r...</div><div class="long"><p>A path specification, relative to the Component's <code><a href="output/Ext.Component.html#Ext.Component-ownerCt" ext:member="ownerCt" ext:cls="Ext.Component">ownerCt</a></code>
447specifying into which ancestor Container to place a named reference to this Component.</p>
448<p>The ancestor axis can be traversed by using '/' characters in the path.
449For example, to put a reference to a Toolbar Button into <i>the Panel which owns the Toolbar</i>:</p><pre><code><b>var</b> myGrid = <b>new</b> Ext.grid.EditorGridPanel({
450 title: <em>'My EditorGridPanel'</em>,
451 store: myStore,
452 colModel: myColModel,
453 tbar: [{
454 text: <em>'Save'</em>,
455 handler: saveChanges,
456 disabled: true,
457 ref: <em>'../saveButton'</em>
458 }],
459 listeners: {
460 afteredit: <b>function</b>() {
461<i>// The button reference is <b>in</b> the GridPanel</i>
462 myGrid.saveButton.enable();
463 }
464 }
465});</code></pre>
466<p>In the code above, if the <code>ref</code> had been <code><em>'saveButton'</em></code>
467the reference would have been placed into the Toolbar. Each '/' in the <code>ref</code>
468moves up one level from the Component's <code><a href="output/Ext.Component.html#Ext.Component-ownerCt" ext:member="ownerCt" ext:cls="Ext.Component">ownerCt</a></code>.</p>
469<p>Also see the <code><a href="output/Ext.Component.html#Ext.Component-added" ext:member="added" ext:cls="Ext.Component">added</a></code> and <code><a href="output/Ext.Component.html#Ext.Component-removed" ext:member="removed" ext:cls="Ext.Component">removed</a></code> events.</p></div></div></td><td class="msource"><a href="output/Ext.Component.html#ref" ext:member="#ref" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-region"></a><b><a href="source/BoxComponent.html#cfg-Ext.BoxComponent-region">region</a></b> : String<div class="mdesc"><div class="short">Note: this config is only used when this BoxComponent is rendered
470by a Container which has been configured to use the...</div><div class="long"><p><b>Note</b>: this config is only used when this BoxComponent is rendered
471by a Container which has been configured to use the <b><a href="output/Ext.layout.BorderLayout.html" ext:cls="Ext.layout.BorderLayout">BorderLayout</a></b>
472layout manager (e.g. specifying <tt>layout:'border'</tt>).</p><br>
473<p>See <a href="output/Ext.layout.BorderLayout.html" ext:cls="Ext.layout.BorderLayout">Ext.layout.BorderLayout</a> also.</p></div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#region" ext:member="#region" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-renderTo"></a><b><a href="source/Component.html#cfg-Ext.Component-renderTo">renderTo</a></b> : Mixed<div class="mdesc"><div class="short">Specify the id of the element, a DOM element or an existing Element that this component
474will be rendered into.
475Notes ...</div><div class="long"><p>Specify the id of the element, a DOM element or an existing Element that this component
476will be rendered into.</p><div><ul>
477<li><b>Notes</b> : <ul>
478<div class="sub-desc">Do <u>not</u> use this option if the Component is to be a child item of
479a <a href="output/Ext.Container.html" ext:cls="Ext.Container">Container</a>. It is the responsibility of the
480<a href="output/Ext.Container.html" ext:cls="Ext.Container">Container</a>'s <a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">layout manager</a>
481to render and manage its child items.</div>
482<div class="sub-desc">When using this config, a call to render() is not required.</div>
483</ul></li>
484</ul></div>
485<p>See <tt><a href="output/Ext.Component.html#Ext.Component-render" ext:member="render" ext:cls="Ext.Component">render</a></tt> also.</p></div></div></td><td class="msource"><a href="output/Ext.Component.html#renderTo" ext:member="#renderTo" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-stateEvents"></a><b><a href="source/Component.html#cfg-Ext.Component-stateEvents">stateEvents</a></b> : Array<div class="mdesc"><div class="short">An array of events that, when fired, should trigger this component to
486save its state (defaults to none). stateEvents ...</div><div class="long"><p>An array of events that, when fired, should trigger this component to
487save its state (defaults to none). <code>stateEvents</code> may be any type
488of event supported by this component, including browser or custom events
489(e.g., <tt>['click', 'customerchange']</tt>).</p>
490<p>See <code><a href="output/Ext.Component.html#Ext.Component-stateful" ext:member="stateful" ext:cls="Ext.Component">stateful</a></code> for an explanation of saving and
491restoring Component state.</p></div></div></td><td class="msource"><a href="output/Ext.Component.html#stateEvents" ext:member="#stateEvents" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-stateId"></a><b><a href="source/Component.html#cfg-Ext.Component-stateId">stateId</a></b> : String<div class="mdesc"><div class="short">The unique id for this component to use for state management purposes
492(defaults to the component id if one was set, o...</div><div class="long">The unique id for this component to use for state management purposes
493(defaults to the component id if one was set, otherwise null if the
494component is using a generated id).
495<p>See <code><a href="output/Ext.Component.html#Ext.Component-stateful" ext:member="stateful" ext:cls="Ext.Component">stateful</a></code> for an explanation of saving and
496restoring Component state.</p></div></div></td><td class="msource"><a href="output/Ext.Component.html#stateId" ext:member="#stateId" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-stateful"></a><b><a href="source/Component.html#cfg-Ext.Component-stateful">stateful</a></b> : Boolean<div class="mdesc"><div class="short">A flag which causes the Component to attempt to restore the state of
497internal properties from a saved state on startu...</div><div class="long"><p>A flag which causes the Component to attempt to restore the state of
498internal properties from a saved state on startup. The component must have
499either a <code><a href="output/Ext.Component.html#Ext.Component-stateId" ext:member="stateId" ext:cls="Ext.Component">stateId</a></code> or <code><a href="output/Ext.Component.html#Ext.Component-id" ext:member="id" ext:cls="Ext.Component">id</a></code> assigned
500for state to be managed. Auto-generated ids are not guaranteed to be stable
501across page loads and cannot be relied upon to save and restore the same
502state for a component.<p>
503<p>For state saving to work, the state manager's provider must have been
504set to an implementation of <a href="output/Ext.state.Provider.html" ext:cls="Ext.state.Provider">Ext.state.Provider</a> which overrides the
505<a href="output/Ext.state.Provider.html#Ext.state.Provider-set" ext:member="set" ext:cls="Ext.state.Provider">set</a> and <a href="output/Ext.state.Provider.html#Ext.state.Provider-get" ext:member="get" ext:cls="Ext.state.Provider">get</a>
506methods to save and recall name/value pairs. A built-in implementation,
507<a href="output/Ext.state.CookieProvider.html" ext:cls="Ext.state.CookieProvider">Ext.state.CookieProvider</a> is available.</p>
508<p>To set the state provider for the current page:</p>
509<pre><code>Ext.state.Manager.setProvider(<b>new</b> Ext.state.CookieProvider({
510 expires: <b>new</b> Date(<b>new</b> Date().getTime()+(1000*60*60*24*7)), <i>//7 days from now</i>
511}));</code></pre>
512<p>A stateful Component attempts to save state when one of the events
513listed in the <code><a href="output/Ext.Component.html#Ext.Component-stateEvents" ext:member="stateEvents" ext:cls="Ext.Component">stateEvents</a></code> configuration fires.</p>
514<p>To save state, a stateful Component first serializes its state by
515calling <b><code>getState</code></b>. By default, this function does
516nothing. The developer must provide an implementation which returns an
517object hash which represents the Component's restorable state.</p>
518<p>The value yielded by getState is passed to <a href="output/Ext.state.Manager.html#Ext.state.Manager-set" ext:member="set" ext:cls="Ext.state.Manager">Ext.state.Manager.set</a>
519which uses the configured <a href="output/Ext.state.Provider.html" ext:cls="Ext.state.Provider">Ext.state.Provider</a> to save the object
520keyed by the Component's <code><a href="output/stateId.html" ext:cls="stateId">stateId</a></code>, or, if that is not
521specified, its <code><a href="output/Ext.Component.html#Ext.Component-id" ext:member="id" ext:cls="Ext.Component">id</a></code>.</p>
522<p>During construction, a stateful Component attempts to <i>restore</i>
523its state by calling <a href="output/Ext.state.Manager.html#Ext.state.Manager-get" ext:member="get" ext:cls="Ext.state.Manager">Ext.state.Manager.get</a> passing the
524<code><a href="output/Ext.Component.html#Ext.Component-stateId" ext:member="stateId" ext:cls="Ext.Component">stateId</a></code>, or, if that is not specified, the
525<code><a href="output/Ext.Component.html#Ext.Component-id" ext:member="id" ext:cls="Ext.Component">id</a></code>.</p>
526<p>The resulting object is passed to <b><code>applyState</code></b>.
527The default implementation of <code>applyState</code> simply copies
528properties into the object, but a developer may override this to support
529more behaviour.</p>
530<p>You can perform extra processing on state save and restore by attaching
531handlers to the <a href="output/Ext.Component.html#Ext.Component-beforestaterestore" ext:member="beforestaterestore" ext:cls="Ext.Component">beforestaterestore</a>, <a href="output/Ext.Component.html#Ext.Component-staterestore" ext:member="staterestore" ext:cls="Ext.Component">staterestore</a>,
532<a href="output/Ext.Component.html#Ext.Component-beforestatesave" ext:member="beforestatesave" ext:cls="Ext.Component">beforestatesave</a> and <a href="output/Ext.Component.html#Ext.Component-statesave" ext:member="statesave" ext:cls="Ext.Component">statesave</a> events.</p></div></div></td><td class="msource"><a href="output/Ext.Component.html#stateful" ext:member="#stateful" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-style"></a><b><a href="source/Component.html#cfg-Ext.Component-style">style</a></b> : String<div class="mdesc"><div class="short">A custom style specification to be applied to this component's Element. Should be a valid argument to
533Ext.Element.ap...</div><div class="long">A custom style specification to be applied to this component's Element. Should be a valid argument to
534<a href="output/Ext.Element.html#Ext.Element-applyStyles" ext:member="applyStyles" ext:cls="Ext.Element">Ext.Element.applyStyles</a>.
535<pre><code><b>new</b> Ext.Panel({
536 title: <em>'Some Title'</em>,
537 renderTo: Ext.getBody(),
538 width: 400, height: 300,
539 layout: <em>'form'</em>,
540 items: [{
541 xtype: <em>'textarea'</em>,
542 style: {
543 width: <em>'95%'</em>,
544 marginBottom: <em>'10px'</em>
545 }
546 },
547 <b>new</b> Ext.Button({
548 text: <em>'Send'</em>,
549 minWidth: <em>'100'</em>,
550 style: {
551 marginBottom: <em>'10px'</em>
552 }
553 })
554 ]
555});</code></pre></div></div></td><td class="msource"><a href="output/Ext.Component.html#style" ext:member="#style" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-tabTip"></a><b><a href="source/BoxComponent.html#cfg-Ext.BoxComponent-tabTip">tabTip</a></b> : String<div class="mdesc"><div class="short">Note: this config is only used when this BoxComponent is a child item of a TabPanel.
556A string to be used as innerHTML...</div><div class="long"><p><b>Note</b>: this config is only used when this BoxComponent is a child item of a TabPanel.</p>
557A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over
558the associated tab selector element. <a href="output/Ext.QuickTips.html" ext:cls="Ext.QuickTips">Ext.QuickTips</a>.init()
559must be called in order for the tips to render.</div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#tabTip" ext:member="#tabTip" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-tpl"></a><b><a href="source/Component.html#cfg-Ext.Component-tpl">tpl</a></b> : Mixed<div class="mdesc"><div class="short">An Ext.Template, Ext.XTemplate
560or an array of strings to form an Ext.XTemplate.
561Used in conjunction with the data and...</div><div class="long">An <bold><a href="output/Ext.Template.html" ext:cls="Ext.Template">Ext.Template</a></bold>, <bold><a href="output/Ext.XTemplate.html" ext:cls="Ext.XTemplate">Ext.XTemplate</a></bold>
562or an array of strings to form an Ext.XTemplate.
563Used in conjunction with the <code><a href="output/Ext.Component.html#Ext.Component-data" ext:member="data" ext:cls="Ext.Component">data</a></code> and
564<code><a href="output/Ext.Component.html#Ext.Component-tplWriteMode" ext:member="tplWriteMode" ext:cls="Ext.Component">tplWriteMode</a></code> configurations.</div></div></td><td class="msource"><a href="output/Ext.Component.html#tpl" ext:member="#tpl" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-tplWriteMode"></a><b><a href="source/Component.html#cfg-Ext.Component-tplWriteMode">tplWriteMode</a></b> : String<div class="mdesc"><div class="short">The Ext.(X)Template method to use when
565updating the content area of the Component. Defaults to 'overwrite'
566(see Ext.X...</div><div class="long">The Ext.(X)Template method to use when
567updating the content area of the Component. Defaults to <tt>'overwrite'</tt>
568(see <code><a href="output/Ext.XTemplate.html#Ext.XTemplate-overwrite" ext:member="overwrite" ext:cls="Ext.XTemplate">Ext.XTemplate.overwrite</a></code>).</div></div></td><td class="msource"><a href="output/Ext.Component.html#tplWriteMode" ext:member="#tplWriteMode" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.slider.MultiSlider-value"></a><b><a href="source/Slider.html#cfg-Ext.slider.MultiSlider-value">value</a></b> : Number<div class="mdesc">The value to initialize the slider with. Defaults to minValue.</div></td><td class="msource">MultiSlider</td></tr><tr class="config-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.slider.MultiSlider-vertical"></a><b><a href="source/Slider.html#cfg-Ext.slider.MultiSlider-vertical">vertical</a></b> : Boolean<div class="mdesc">Orient the Slider vertically rather than horizontally, defaults to false.</div></td><td class="msource">MultiSlider</td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-width"></a><b><a href="source/BoxComponent.html#cfg-Ext.BoxComponent-width">width</a></b> : Number<div class="mdesc"><div class="short">The width of this component in pixels (defaults to auto).
569Note to express this dimension as a percentage or offset se...</div><div class="long">The width of this component in pixels (defaults to auto).
570<b>Note</b> to express this dimension as a percentage or offset see <a href="output/Ext.Component.html#Ext.Component-anchor" ext:member="anchor" ext:cls="Ext.Component">Ext.Component.anchor</a>.</div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#width" ext:member="#width" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-x"></a><b><a href="source/BoxComponent.html#cfg-Ext.BoxComponent-x">x</a></b> : Number<div class="mdesc">The local x (left) coordinate for this component if contained within a positioning container.</div></td><td class="msource"><a href="output/Ext.BoxComponent.html#x" ext:member="#x" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-xtype"></a><b><a href="source/Component.html#cfg-Ext.Component-xtype">xtype</a></b> : String<div class="mdesc"><div class="short">The registered xtype to create. This config option is not used when passing
571a config object into a constructor. This ...</div><div class="long">The registered <tt>xtype</tt> to create. This config option is not used when passing
572a config object into a constructor. This config option is used only when
573lazy instantiation is being used, and a child item of a Container is being
574specified not as a fully instantiated Component, but as a <i>Component config
575object</i>. The <tt>xtype</tt> will be looked up at render time up to determine what
576type of child Component to create.<br><br>
577The predefined xtypes are listed <a href="output/Ext.Component.html" ext:cls="Ext.Component">here</a>.
578<br><br>
579If you subclass Components to create your own Components, you may register
580them using <a href="output/Ext.ComponentMgr.html#Ext.ComponentMgr-registerType" ext:member="registerType" ext:cls="Ext.ComponentMgr">Ext.ComponentMgr.registerType</a> in order to be able to
581take advantage of lazy instantiation and rendering.</div></div></td><td class="msource"><a href="output/Ext.Component.html#xtype" ext:member="#xtype" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-y"></a><b><a href="source/BoxComponent.html#cfg-Ext.BoxComponent-y">y</a></b> : Number<div class="mdesc">The local y (top) coordinate for this component if contained within a positioning container.</div></td><td class="msource"><a href="output/Ext.BoxComponent.html#y" ext:member="#y" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr></tbody></table><a id="Ext.slider.MultiSlider-props"></a><h2>Public Properties</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Property</th><th class="msource-header">Defined By</th></tr><tr class="property-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-disabled"></a><b><a href="source/Component.html#prop-Ext.Component-disabled">disabled</a></b> : Boolean<div class="mdesc">True if this component is disabled. Read-only.</div></td><td class="msource"><a href="output/Ext.Component.html#disabled" ext:member="#disabled" ext:cls="Ext.Component">Component</a></td></tr><tr class="property-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.slider.MultiSlider-dragging"></a><b><a href="source/Slider.html#prop-Ext.slider.MultiSlider-dragging">dragging</a></b> : Boolean<div class="mdesc">True while the thumb is in a drag operation</div></td><td class="msource">MultiSlider</td></tr><tr class="property-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-el"></a><b><a href="source/Component.html#prop-Ext.Component-el">el</a></b> : Ext.Element<div class="mdesc"><div class="short">The Ext.Element which encapsulates this Component. Read-only.
582This will usually be a &lt;DIV> element created by the ...</div><div class="long"><p>The <a href="output/Ext.Element.html" ext:cls="Ext.Element">Ext.Element</a> which encapsulates this Component. Read-only.</p>
583<p>This will <i>usually</i> be a <DIV> element created by the class's onRender method, but
584that may be overridden using the <code><a href="output/Ext.Component.html#Ext.Component-autoEl" ext:member="autoEl" ext:cls="Ext.Component">autoEl</a></code> config.</p>
585<br><p><b>Note</b>: this element will not be available until this Component has been rendered.</p><br>
586<p>To add listeners for <b>DOM events</b> to this Component (as opposed to listeners
587for this Component's own Observable events), see the <a href="output/Ext.util.Observable.html#Ext.util.Observable-listeners" ext:member="listeners" ext:cls="Ext.util.Observable">listeners</a>
588config for a suggestion, or use a render listener directly:</p><pre><code><b>new</b> Ext.Panel({
589 title: <em>'The Clickable Panel'</em>,
590 listeners: {
591 render: <b>function</b>(p) {
592 <i>// Append the Panel to the click handler's argument list.</i>
593 p.getEl().on(<em>'click'</em>, handlePanelClick.createDelegate(null, [p], true));
594 },
595 single: true <i>// Remove the listener after first invocation</i>
596 }
597});</code></pre>
598<p>See also <tt><a href="output/Ext.Component.html#Ext.Component-getEl" ext:member="getEl" ext:cls="Ext.Component">getEl</a></p></div></div></td><td class="msource"><a href="output/Ext.Component.html#el" ext:member="#el" ext:cls="Ext.Component">Component</a></td></tr><tr class="property-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-hidden"></a><b><a href="source/Component.html#prop-Ext.Component-hidden">hidden</a></b> : Boolean<div class="mdesc">True if this component is hidden. Read-only.</div></td><td class="msource"><a href="output/Ext.Component.html#hidden" ext:member="#hidden" ext:cls="Ext.Component">Component</a></td></tr><tr class="property-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-initialConfig"></a><b><a href="source/Component.html#prop-Ext.Component-initialConfig">initialConfig</a></b> : Object<div class="mdesc">This Component's initial configuration specification. Read-only.</div></td><td class="msource"><a href="output/Ext.Component.html#initialConfig" ext:member="#initialConfig" ext:cls="Ext.Component">Component</a></td></tr><tr class="property-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-ownerCt"></a><b><a href="source/Component.html#prop-Ext.Component-ownerCt">ownerCt</a></b> : Ext.Container<div class="mdesc"><div class="short">This Component's owner Container (defaults to undefined, and is set automatically when
599this Component is added to a C...</div><div class="long">This Component's owner <a href="output/Ext.Container.html" ext:cls="Ext.Container">Container</a> (defaults to undefined, and is set automatically when
600this Component is added to a Container). Read-only.
601<p><b>Note</b>: to access items within the Container see <tt><a href="output/Ext.Component.html#Ext.Component-itemId" ext:member="itemId" ext:cls="Ext.Component">itemId</a></tt>.</p></div></div></td><td class="msource"><a href="output/Ext.Component.html#ownerCt" ext:member="#ownerCt" ext:cls="Ext.Component">Component</a></td></tr><tr class="property-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-refOwner"></a><b><a href="source/Component.html#prop-Ext.Component-refOwner">refOwner</a></b> : Ext.Container<div class="mdesc"><div class="short">The ancestor Container into which the ref reference was inserted if this Component
602is a child of a Container, and has...</div><div class="long">The ancestor Container into which the <a href="output/Ext.Component.html#Ext.Component-ref" ext:member="ref" ext:cls="Ext.Component">ref</a> reference was inserted if this Component
603is a child of a Container, and has been configured with a <code>ref</code>.</div></div></td><td class="msource"><a href="output/Ext.Component.html#refOwner" ext:member="#refOwner" ext:cls="Ext.Component">Component</a></td></tr><tr class="property-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-rendered"></a><b><a href="source/Component.html#prop-Ext.Component-rendered">rendered</a></b> : Boolean<div class="mdesc">True if this component has been rendered. Read-only.</div></td><td class="msource"><a href="output/Ext.Component.html#rendered" ext:member="#rendered" ext:cls="Ext.Component">Component</a></td></tr><tr class="property-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.slider.MultiSlider-thumbs"></a><b><a href="source/Slider.html#prop-Ext.slider.MultiSlider-thumbs">thumbs</a></b> : Array
604Array containing references to each thumb<div class="mdesc"></div></td><td class="msource">MultiSlider</td></tr><tr class="property-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.slider.MultiSlider-values"></a><b><a href="source/Slider.html#prop-Ext.slider.MultiSlider-values">values</a></b> : Array
605Array of values to initalize the thumbs with<div class="mdesc"></div></td><td class="msource">MultiSlider</td></tr></tbody></table><a id="Ext.slider.MultiSlider-methods"></a><h2>Public Methods</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Method</th><th class="msource-header">Defined By</th></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-addClass"></a><b><a href="source/Component.html#method-Ext.Component-addClass">addClass</a></b>( <code>string cls</code> )
606 :
607 Ext.Component<div class="mdesc"><div class="short">Adds a CSS class to the component's underlying element.</div><div class="long">Adds a CSS class to the component's underlying element.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>cls</code> : string<div class="sub-desc">The CSS class name to add</div></li></ul><strong>Returns:</strong><ul><li><code>Ext.Component</code><div class="sub-desc">this</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.Component.html#addClass" ext:member="#addClass" ext:cls="Ext.Component">Component</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.util.Observable-addEvents"></a><b><a href="source/Observable.html#method-Ext.util.Observable-addEvents">addEvents</a></b>( <code>Object|String o</code>, <code>string Optional.</code> )
608 :
609 void<div class="mdesc"><div class="short">Adds the specified events to the list of events which this Observable may fire.</div><div class="long">Adds the specified events to the list of events which this Observable may fire.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>o</code> : Object|String<div class="sub-desc">Either an object with event names as properties with a value of <code>true</code>
610or the first event name string if multiple event names are being passed as separate parameters.</div></li><li><code>Optional.</code> : string<div class="sub-desc">Event name if multiple event names are being passed as separate parameters.
611Usage:<pre><code>this.addEvents(<em>'storeloaded'</em>, <em>'storecleared'</em>);</code></pre></div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#addEvents" ext:member="#addEvents" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.util.Observable-addListener"></a><b><a href="source/Observable.html#method-Ext.util.Observable-addListener">addListener</a></b>( <code>String eventName</code>, <code>Function handler</code>, <span title="Optional" class="optional">[<code>Object scope</code>]</span>, <span title="Optional" class="optional">[<code>Object options</code>]</span> )
612 :
613 void<div class="mdesc"><div class="short">Appends an event handler to this object.</div><div class="long">Appends an event handler to this object.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>eventName</code> : String<div class="sub-desc">The name of the event to listen for.</div></li><li><code>handler</code> : Function<div class="sub-desc">The method the event invokes.</div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope (<code><b>this</b></code> reference) in which the handler function is executed.
614<b>If omitted, defaults to the object which fired the event.</b></div></li><li><code>options</code> : Object<div class="sub-desc">(optional) An object containing handler configuration.
615properties. This may contain any of the following properties:<ul>
616<li><b>scope</b> : Object<div class="sub-desc">The scope (<code><b>this</b></code> reference) in which the handler function is executed.
617<b>If omitted, defaults to the object which fired the event.</b></div></li>
618<li><b>delay</b> : Number<div class="sub-desc">The number of milliseconds to delay the invocation of the handler after the event fires.</div></li>
619<li><b>single</b> : Boolean<div class="sub-desc">True to add a handler to handle just the next firing of the event, and then remove itself.</div></li>
620<li><b>buffer</b> : Number<div class="sub-desc">Causes the handler to be scheduled to run in an <a href="output/Ext.util.DelayedTask.html" ext:cls="Ext.util.DelayedTask">Ext.util.DelayedTask</a> delayed
621by the specified number of milliseconds. If the event fires again within that time, the original
622handler is <em>not</em> invoked, but the new handler is scheduled in its place.</div></li>
623<li><b>target</b> : Observable<div class="sub-desc">Only call the handler if the event was fired on the target Observable, <i>not</i>
624if the event was bubbled up from a child Observable.</div></li>
625</ul><br>
626<p>
627<b>Combining Options</b><br>
628Using the options argument, it is possible to combine different types of listeners:<br>
629<br>
630A delayed, one-time listener.
631<pre><code>myDataView.on(<em>'click'</em>, this.onClick, this, {
632single: true,
633delay: 100
634});</code></pre>
635<p>
636<b>Attaching multiple handlers in 1 call</b><br>
637The method also allows for a single argument to be passed which is a config object containing properties
638which specify multiple handlers.
639<p>
640<pre><code>myGridPanel.on({
641<em>'click'</em> : {
642 fn: this.onClick,
643 scope: this,
644 delay: 100
645},
646<em>'mouseover'</em> : {
647 fn: this.onMouseOver,
648 scope: this
649},
650<em>'mouseout'</em> : {
651 fn: this.onMouseOut,
652 scope: this
653}
654});</code></pre>
655<p>
656Or a shorthand syntax:<br>
657<pre><code>myGridPanel.on({
658<em>'click'</em> : this.onClick,
659<em>'mouseover'</em> : this.onMouseOver,
660<em>'mouseout'</em> : this.onMouseOut,
661 scope: this
662});</code></pre></div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#addListener" ext:member="#addListener" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.slider.MultiSlider-addThumb"></a><b><a href="source/Slider.html#method-Ext.slider.MultiSlider-addThumb">addThumb</a></b>( <code>Number value</code> )
663 :
664 void<div class="mdesc"><div class="short">Creates a new thumb and adds it to the slider</div><div class="long">Creates a new thumb and adds it to the slider<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>value</code> : Number<div class="sub-desc">The initial value to set on the thumb. Defaults to 0</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">MultiSlider</td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-applyToMarkup"></a><b><a href="source/Component.html#method-Ext.Component-applyToMarkup">applyToMarkup</a></b>( <code>String/HTMLElement el</code> )
665 :
666 void<div class="mdesc"><div class="short">Apply this component to existing markup that is valid. With this function, no call to render() is required.</div><div class="long">Apply this component to existing markup that is valid. With this function, no call to render() is required.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>el</code> : String/HTMLElement<div class="sub-desc"></div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.Component.html#applyToMarkup" ext:member="#applyToMarkup" ext:cls="Ext.Component">Component</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-cloneConfig"></a><b><a href="source/Component.html#method-Ext.Component-cloneConfig">cloneConfig</a></b>( <code>Object overrides</code> )
667 :
668 Ext.Component<div class="mdesc"><div class="short">Clone the current component using the original config values passed into this instance by default.</div><div class="long">Clone the current component using the original config values passed into this instance by default.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>overrides</code> : Object<div class="sub-desc">A new config containing any properties to override in the cloned version.
669An id property can be passed on this object, otherwise one will be generated to avoid duplicates.</div></li></ul><strong>Returns:</strong><ul><li><code>Ext.Component</code><div class="sub-desc">clone The cloned copy of this component</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.Component.html#cloneConfig" ext:member="#cloneConfig" ext:cls="Ext.Component">Component</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-destroy"></a><b><a href="source/Component.html#method-Ext.Component-destroy">destroy</a></b>()
670 :
671 void<div class="mdesc"><div class="short">Destroys this component by purging any event listeners, removing the component's element from the DOM,
672removing the c...</div><div class="long">Destroys this component by purging any event listeners, removing the component's element from the DOM,
673removing the component from its <a href="output/Ext.Container.html" ext:cls="Ext.Container">Ext.Container</a> (if applicable) and unregistering it from
674<a href="output/Ext.ComponentMgr.html" ext:cls="Ext.ComponentMgr">Ext.ComponentMgr</a>. Destruction is generally handled automatically by the framework and this method
675should usually not need to be called directly.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.Component.html#destroy" ext:member="#destroy" ext:cls="Ext.Component">Component</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-disable"></a><b><a href="source/Component.html#method-Ext.Component-disable">disable</a></b>()
676 :
677 Ext.Component<div class="mdesc"><div class="short">Disable this component and fire the 'disable' event.</div><div class="long">Disable this component and fire the 'disable' event.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>Ext.Component</code><div class="sub-desc">this</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.Component.html#disable" ext:member="#disable" ext:cls="Ext.Component">Component</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-enable"></a><b><a href="source/Component.html#method-Ext.Component-enable">enable</a></b>()
678 :
679 Ext.Component<div class="mdesc"><div class="short">Enable this component and fire the 'enable' event.</div><div class="long">Enable this component and fire the 'enable' event.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>Ext.Component</code><div class="sub-desc">this</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.Component.html#enable" ext:member="#enable" ext:cls="Ext.Component">Component</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.util.Observable-enableBubble"></a><b><a href="source/Observable-more.html#method-Ext.util.Observable-enableBubble">enableBubble</a></b>( <code>String/Array events</code> )
680 :
681 void<div class="mdesc"><div class="short">Enables events fired by this Observable to bubble up an owner hierarchy by calling
682this.getBubbleTarget() if present....</div><div class="long"><p>Enables events fired by this Observable to bubble up an owner hierarchy by calling
683<code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class.</p>
684<p>This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="output/Ext.Component.getBubbleTarget.html" ext:cls="Ext.Component.getBubbleTarget">Ext.Component.getBubbleTarget</a>. The default
685implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
686access the required target more quickly.</p>
687<p>Example:</p><pre><code>Ext.override(Ext.form.Field, {
688 <i>// Add functionality to Field's initComponent to enable the change event to bubble</i>
689 initComponent : Ext.form.Field.prototype.initComponent.createSequence(<b>function</b>() {
690 this.enableBubble(<em>'change'</em>);
691 }),
692
693 <i>// We know that we want Field's events to bubble directly to the FormPanel.</i>
694 getBubbleTarget : <b>function</b>() {
695 <b>if</b> (!this.formPanel) {
696 this.formPanel = this.findParentByType(<em>'form'</em>);
697 }
698 <b>return</b> this.formPanel;
699 }
700});
701
702<b>var</b> myForm = <b>new</b> Ext.formPanel({
703 title: <em>'User Details'</em>,
704 items: [{
705 ...
706 }],
707 listeners: {
708 change: <b>function</b>() {
709 <i>// Title goes red <b>if</b> form has been modified.</i>
710 myForm.header.setStyle(<em>'color'</em>, <em>'red'</em>);
711 }
712 }
713});</code></pre><div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>events</code> : String/Array<div class="sub-desc">The event name to bubble, or an Array of event names.</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#enableBubble" ext:member="#enableBubble" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-findParentBy"></a><b><a href="source/Component.html#method-Ext.Component-findParentBy">findParentBy</a></b>( <code>Function fn</code> )
714 :
715 Ext.Container<div class="mdesc"><div class="short">Find a container above this component at any level by a custom function. If the passed function returns
716true, the con...</div><div class="long">Find a container above this component at any level by a custom function. If the passed function returns
717true, the container will be returned.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>fn</code> : Function<div class="sub-desc">The custom function to call with the arguments (container, this component).</div></li></ul><strong>Returns:</strong><ul><li><code>Ext.Container</code><div class="sub-desc">The first Container for which the custom function returns true</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.Component.html#findParentBy" ext:member="#findParentBy" ext:cls="Ext.Component">Component</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-findParentByType"></a><b><a href="source/Component.html#method-Ext.Component-findParentByType">findParentByType</a></b>( <code>String/Class xtype</code> )
718 :
719 Ext.Container<div class="mdesc"><div class="short">Find a container above this component at any level by xtype or class</div><div class="long">Find a container above this component at any level by xtype or class<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>xtype</code> : String/Class<div class="sub-desc">The xtype string for a component, or the class of the component directly</div></li></ul><strong>Returns:</strong><ul><li><code>Ext.Container</code><div class="sub-desc">The first Container which matches the given xtype or class</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.Component.html#findParentByType" ext:member="#findParentByType" ext:cls="Ext.Component">Component</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.util.Observable-fireEvent"></a><b><a href="source/Observable.html#method-Ext.util.Observable-fireEvent">fireEvent</a></b>( <code>String eventName</code>, <code>Object... args</code> )
720 :
721 Boolean<div class="mdesc"><div class="short">Fires the specified event with the passed parameters (minus the event name).
722An event may be set to bubble up an Obse...</div><div class="long"><p>Fires the specified event with the passed parameters (minus the event name).</p>
723<p>An event may be set to bubble up an Observable parent hierarchy (See <a href="output/Ext.Component.html#Ext.Component-getBubbleTarget" ext:member="getBubbleTarget" ext:cls="Ext.Component">Ext.Component.getBubbleTarget</a>)
724by calling <a href="output/Ext.util.Observable.html#Ext.util.Observable-enableBubble" ext:member="enableBubble" ext:cls="Ext.util.Observable">enableBubble</a>.</p><div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>eventName</code> : String<div class="sub-desc">The name of the event to fire.</div></li><li><code>args</code> : Object...<div class="sub-desc">Variable number of parameters are passed to handlers.</div></li></ul><strong>Returns:</strong><ul><li><code>Boolean</code><div class="sub-desc">returns false if any of the handlers return false otherwise it returns true.</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#fireEvent" ext:member="#fireEvent" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-focus"></a><b><a href="source/Component.html#method-Ext.Component-focus">focus</a></b>( <span title="Optional" class="optional">[<code>Boolean selectText</code>]</span>, <span title="Optional" class="optional">[<code>Boolean/Number delay</code>]</span> )
725 :
726 Ext.Component<div class="mdesc"><div class="short">Try to focus this component.</div><div class="long">Try to focus this component.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>selectText</code> : Boolean<div class="sub-desc">(optional) If applicable, true to also select the text in this component</div></li><li><code>delay</code> : Boolean/Number<div class="sub-desc">(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)</div></li></ul><strong>Returns:</strong><ul><li><code>Ext.Component</code><div class="sub-desc">this</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.Component.html#focus" ext:member="#focus" ext:cls="Ext.Component">Component</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-getBox"></a><b><a href="source/BoxComponent.html#method-Ext.BoxComponent-getBox">getBox</a></b>( <span title="Optional" class="optional">[<code>Boolean local</code>]</span> )
727 :
728 Object<div class="mdesc"><div class="short">Gets the current box measurements of the component's underlying element.</div><div class="long">Gets the current box measurements of the component's underlying element.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>local</code> : Boolean<div class="sub-desc">(optional) If true the element's left and top are returned instead of page XY (defaults to false)</div></li></ul><strong>Returns:</strong><ul><li><code>Object</code><div class="sub-desc">box An object in the format {x, y, width, height}</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#getBox" ext:member="#getBox" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-getBubbleTarget"></a><b><a href="source/Component.html#method-Ext.Component-getBubbleTarget">getBubbleTarget</a></b>()
729 :
730 Ext.Container<div class="mdesc"><div class="short">Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.</div><div class="long">Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>Ext.Container</code><div class="sub-desc">the Container which owns this Component.</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.Component.html#getBubbleTarget" ext:member="#getBubbleTarget" ext:cls="Ext.Component">Component</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-getEl"></a><b><a href="source/Component.html#method-Ext.Component-getEl">getEl</a></b>()
731 :
732 Ext.Element<div class="mdesc"><div class="short">Returns the Ext.Element which encapsulates this Component.
733This will usually be a &lt;DIV> element created by the cla...</div><div class="long"><p>Returns the <a href="output/Ext.Element.html" ext:cls="Ext.Element">Ext.Element</a> which encapsulates this Component.</p>
734<p>This will <i>usually</i> be a <DIV> element created by the class's onRender method, but
735that may be overridden using the <a href="output/Ext.Component.html#Ext.Component-autoEl" ext:member="autoEl" ext:cls="Ext.Component">autoEl</a> config.</p>
736<br><p><b>Note</b>: this element will not be available until this Component has been rendered.</p><br>
737<p>To add listeners for <b>DOM events</b> to this Component (as opposed to listeners
738for this Component's own Observable events), see the <a href="output/Ext.Component.html#Ext.Component-listeners" ext:member="listeners" ext:cls="Ext.Component">listeners</a> config for a suggestion,
739or use a render listener directly:</p><pre><code><b>new</b> Ext.Panel({
740 title: <em>'The Clickable Panel'</em>,
741 listeners: {
742 render: <b>function</b>(p) {
743 <i>// Append the Panel to the click handler's argument list.</i>
744 p.getEl().on(<em>'click'</em>, handlePanelClick.createDelegate(null, [p], true));
745 },
746 single: true <i>// Remove the listener after first invocation</i>
747 }
748});</code></pre><div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>Ext.Element</code><div class="sub-desc">The Element which encapsulates this Component.</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.Component.html#getEl" ext:member="#getEl" ext:cls="Ext.Component">Component</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-getHeight"></a><b><a href="source/BoxComponent.html#method-Ext.BoxComponent-getHeight">getHeight</a></b>()
749 :
750 Number<div class="mdesc"><div class="short">Gets the current height of the component's underlying element.</div><div class="long">Gets the current height of the component's underlying element.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>Number</code><div class="sub-desc"></div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#getHeight" ext:member="#getHeight" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-getId"></a><b><a href="source/Component.html#method-Ext.Component-getId">getId</a></b>()
751 :
752 String<div class="mdesc"><div class="short">Returns the id of this component or automatically generates and
753returns an id if an id is not defined yet:'ext-comp-'...</div><div class="long">Returns the <code>id</code> of this component or automatically generates and
754returns an <code>id</code> if an <code>id</code> is not defined yet:<pre><code><em>'ext-comp-'</em> + (++Ext.Component.AUTO_ID)</code></pre><div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>String</code><div class="sub-desc">id</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.Component.html#getId" ext:member="#getId" ext:cls="Ext.Component">Component</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-getItemId"></a><b><a href="source/Component.html#method-Ext.Component-getItemId">getItemId</a></b>()
755 :
756 String<div class="mdesc"><div class="short">Returns the itemId of this component. If an
757itemId was not assigned through configuration the
758id is returned using g...</div><div class="long">Returns the <code><a href="output/Ext.Component.html#Ext.Component-itemId" ext:member="itemId" ext:cls="Ext.Component">itemId</a></code> of this component. If an
759<code><a href="output/Ext.Component.html#Ext.Component-itemId" ext:member="itemId" ext:cls="Ext.Component">itemId</a></code> was not assigned through configuration the
760<code>id</code> is returned using <code><a href="output/Ext.Component.html#Ext.Component-getId" ext:member="getId" ext:cls="Ext.Component">getId</a></code>.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>String</code><div class="sub-desc"></div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.Component.html#getItemId" ext:member="#getItemId" ext:cls="Ext.Component">Component</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-getOuterSize"></a><b><a href="source/BoxComponent.html#method-Ext.BoxComponent-getOuterSize">getOuterSize</a></b>()
761 :
762 Object<div class="mdesc"><div class="short">Gets the current size of the component's underlying element, including space taken by its margins.</div><div class="long">Gets the current size of the component's underlying element, including space taken by its margins.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>Object</code><div class="sub-desc">An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#getOuterSize" ext:member="#getOuterSize" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-getPosition"></a><b><a href="source/BoxComponent.html#method-Ext.BoxComponent-getPosition">getPosition</a></b>( <span title="Optional" class="optional">[<code>Boolean local</code>]</span> )
763 :
764 Array<div class="mdesc"><div class="short">Gets the current XY position of the component's underlying element.</div><div class="long">Gets the current XY position of the component's underlying element.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>local</code> : Boolean<div class="sub-desc">(optional) If true the element's left and top are returned instead of page XY (defaults to false)</div></li></ul><strong>Returns:</strong><ul><li><code>Array</code><div class="sub-desc">The XY position of the element (e.g., [100, 200])</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#getPosition" ext:member="#getPosition" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-getResizeEl"></a><b><a href="source/BoxComponent.html#method-Ext.BoxComponent-getResizeEl">getResizeEl</a></b>()
765 :
766 Ext.Element<div class="mdesc"><div class="short">Returns the outermost Element of this Component which defines the Components overall size.
767Usually this will return t...</div><div class="long"><p>Returns the outermost Element of this Component which defines the Components overall size.</p>
768<p><i>Usually</i> this will return the same Element as <code><a href="output/Ext.BoxComponent.html#Ext.BoxComponent-getEl" ext:member="getEl" ext:cls="Ext.BoxComponent">getEl</a></code>,
769but in some cases, a Component may have some more wrapping Elements around its main
770active Element.</p>
771<p>An example is a ComboBox. It is encased in a <i>wrapping</i> Element which
772contains both the <code><input></code> Element (which is what would be returned
773by its <code><a href="output/Ext.BoxComponent.html#Ext.BoxComponent-getEl" ext:member="getEl" ext:cls="Ext.BoxComponent">getEl</a></code> method, <i>and</i> the trigger button Element.
774This Element is returned as the <code>resizeEl</code>.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>Ext.Element</code><div class="sub-desc">The Element which is to be resized by size managing layouts.</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#getResizeEl" ext:member="#getResizeEl" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-getSize"></a><b><a href="source/BoxComponent.html#method-Ext.BoxComponent-getSize">getSize</a></b>()
775 :
776 Object<div class="mdesc"><div class="short">Gets the current size of the component's underlying element.</div><div class="long">Gets the current size of the component's underlying element.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>Object</code><div class="sub-desc">An object containing the element's size {width: (element width), height: (element height)}</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#getSize" ext:member="#getSize" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.slider.MultiSlider-getValue"></a><b><a href="source/Slider.html#method-Ext.slider.MultiSlider-getValue">getValue</a></b>( <code>Number index</code> )
777 :
778 Number<div class="mdesc"><div class="short">Returns the current value of the slider</div><div class="long">Returns the current value of the slider<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>index</code> : Number<div class="sub-desc">The index of the thumb to return a value for</div></li></ul><strong>Returns:</strong><ul><li><code>Number</code><div class="sub-desc">The current value of the slider</div></li></ul></div></div></div></td><td class="msource">MultiSlider</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.slider.MultiSlider-getValues"></a><b><a href="source/Slider.html#method-Ext.slider.MultiSlider-getValues">getValues</a></b>()
779 :
780 Array<div class="mdesc"><div class="short">Returns an array of values - one for the location of each thumb</div><div class="long">Returns an array of values - one for the location of each thumb<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>Array</code><div class="sub-desc">The set of thumb values</div></li></ul></div></div></div></td><td class="msource">MultiSlider</td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-getWidth"></a><b><a href="source/BoxComponent.html#method-Ext.BoxComponent-getWidth">getWidth</a></b>()
781 :
782 Number<div class="mdesc"><div class="short">Gets the current width of the component's underlying element.</div><div class="long">Gets the current width of the component's underlying element.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>Number</code><div class="sub-desc"></div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#getWidth" ext:member="#getWidth" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-getXType"></a><b><a href="source/Component.html#method-Ext.Component-getXType">getXType</a></b>()
783 :
784 String<div class="mdesc"><div class="short">Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
785available xtypes, see the Ex...</div><div class="long">Gets the xtype for this component as registered with <a href="output/Ext.ComponentMgr.html" ext:cls="Ext.ComponentMgr">Ext.ComponentMgr</a>. For a list of all
786available xtypes, see the <a href="output/Ext.Component.html" ext:cls="Ext.Component">Ext.Component</a> header. Example usage:
787<pre><code><b>var</b> t = <b>new</b> Ext.form.TextField();
788alert(t.getXType()); <i>// alerts <em>'textfield'</em></i></code></pre><div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>String</code><div class="sub-desc">The xtype</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.Component.html#getXType" ext:member="#getXType" ext:cls="Ext.Component">Component</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-getXTypes"></a><b><a href="source/Component.html#method-Ext.Component-getXTypes">getXTypes</a></b>()
789 :
790 String<div class="mdesc"><div class="short">Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
791available xtypes, see the Ext...</div><div class="long"><p>Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
792available xtypes, see the <a href="output/Ext.Component.html" ext:cls="Ext.Component">Ext.Component</a> header.</p>
793<p><b>If using your own subclasses, be aware that a Component must register its own xtype
794to participate in determination of inherited xtypes.</b></p>
795<p>Example usage:</p>
796<pre><code><b>var</b> t = <b>new</b> Ext.form.TextField();
797alert(t.getXTypes()); <i>// alerts <em>'component/box/field/textfield'</em></i></code></pre><div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>String</code><div class="sub-desc">The xtype hierarchy string</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.Component.html#getXTypes" ext:member="#getXTypes" ext:cls="Ext.Component">Component</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.util.Observable-hasListener"></a><b><a href="source/Observable.html#method-Ext.util.Observable-hasListener">hasListener</a></b>( <code>String eventName</code> )
798 :
799 Boolean<div class="mdesc"><div class="short">Checks to see if this object has any listeners for a specified event</div><div class="long">Checks to see if this object has any listeners for a specified event<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>eventName</code> : String<div class="sub-desc">The name of the event to check for</div></li></ul><strong>Returns:</strong><ul><li><code>Boolean</code><div class="sub-desc">True if the event is being listened for, else false</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#hasListener" ext:member="#hasListener" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-hide"></a><b><a href="source/Component.html#method-Ext.Component-hide">hide</a></b>()
800 :
801 Ext.Component<div class="mdesc"><div class="short">Hide this component. Listen to the 'beforehide' event and return
802false to cancel hiding the component. Fires the 'h...</div><div class="long">Hide this component. Listen to the '<a href="output/Ext.Component.html#Ext.Component-beforehide" ext:member="beforehide" ext:cls="Ext.Component">beforehide</a>' event and return
803<tt>false</tt> to cancel hiding the component. Fires the '<a href="output/Ext.Component.html#Ext.Component-hide" ext:member="hide" ext:cls="Ext.Component">hide</a>'
804event after hiding the component. Note this method is called internally if
805the component is configured to be <code><a href="output/Ext.Component.html#Ext.Component-hidden" ext:member="hidden" ext:cls="Ext.Component">hidden</a></code>.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>Ext.Component</code><div class="sub-desc">this</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.Component.html#hide" ext:member="#hide" ext:cls="Ext.Component">Component</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-isVisible"></a><b><a href="source/Component.html#method-Ext.Component-isVisible">isVisible</a></b>()
806 :
807 Boolean<div class="mdesc"><div class="short">Returns true if this component is visible.</div><div class="long">Returns true if this component is visible.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>Boolean</code><div class="sub-desc">True if this component is visible, false otherwise.</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.Component.html#isVisible" ext:member="#isVisible" ext:cls="Ext.Component">Component</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-isXType"></a><b><a href="source/Component.html#method-Ext.Component-isXType">isXType</a></b>( <code>String xtype</code>, <span title="Optional" class="optional">[<code>Boolean shallow</code>]</span> )
808 :
809 Boolean<div class="mdesc"><div class="short">Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
810from th...</div><div class="long"><p>Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
811from the xtype (default) or whether it is directly of the xtype specified (shallow = true).</p>
812<p><b>If using your own subclasses, be aware that a Component must register its own xtype
813to participate in determination of inherited xtypes.</b></p>
814<p>For a list of all available xtypes, see the <a href="output/Ext.Component.html" ext:cls="Ext.Component">Ext.Component</a> header.</p>
815<p>Example usage:</p>
816<pre><code><b>var</b> t = <b>new</b> Ext.form.TextField();
817<b>var</b> isText = t.isXType(<em>'textfield'</em>); <i>// true</i>
818<b>var</b> isBoxSubclass = t.isXType(<em>'box'</em>); <i>// true, descended from BoxComponent</i>
819<b>var</b> isBoxInstance = t.isXType(<em>'box'</em>, true); <i>// false, not a direct BoxComponent instance</i></code></pre><div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>xtype</code> : String<div class="sub-desc">The xtype to check for this Component</div></li><li><code>shallow</code> : Boolean<div class="sub-desc">(optional) False to check whether this Component is descended from the xtype (this is
820the default), or true to check whether this Component is directly of the specified xtype.</div></li></ul><strong>Returns:</strong><ul><li><code>Boolean</code><div class="sub-desc">True if this component descends from the specified xtype, false otherwise.</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.Component.html#isXType" ext:member="#isXType" ext:cls="Ext.Component">Component</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-mon"></a><b><a href="source/Component.html#method-Ext.Component-mon">mon</a></b>( <code>Observable|Element item</code>, <code>Object|String ename</code>, <code>Function fn</code>, <code>Object scope</code>, <code>Object opt</code> )
821 :
822 void<div class="mdesc"><div class="short">Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
823is destroye...</div><div class="long"><p>Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
824is destroyed. Usage:</p><code><pre>
825myGridPanel.mon(myGridPanel.getSelectionModel(), <em>'selectionchange'</em>, handleSelectionChange, null, {buffer: 50});
826</pre></code>
827<p>or:</p><code><pre>
828myGridPanel.mon(myGridPanel.getSelectionModel(), {
829 selectionchange: handleSelectionChange,
830 buffer: 50
831});
832</pre></code><div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>item</code> : Observable|Element<div class="sub-desc">The item to which to add a listener/listeners.</div></li><li><code>ename</code> : Object|String<div class="sub-desc">The event name, or an object containing event name properties.</div></li><li><code>fn</code> : Function<div class="sub-desc">Optional. If the <code>ename</code> parameter was an event name, this
833is the handler function.</div></li><li><code>scope</code> : Object<div class="sub-desc">Optional. If the <code>ename</code> parameter was an event name, this
834is the scope (<code>this</code> reference) in which the handler function is executed.</div></li><li><code>opt</code> : Object<div class="sub-desc">Optional. If the <code>ename</code> parameter was an event name, this
835is the <a href="output/Ext.util.Observable.html#Ext.util.Observable-addListener" ext:member="addListener" ext:cls="Ext.util.Observable">addListener</a> options.</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.Component.html#mon" ext:member="#mon" ext:cls="Ext.Component">Component</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-mun"></a><b><a href="source/Component.html#method-Ext.Component-mun">mun</a></b>( <code>Observable|Element item</code>, <code>Object|String ename</code>, <code>Function fn</code>, <code>Object scope</code> )
836 :
837 void<div class="mdesc"><div class="short">Removes listeners that were added by the mon method.</div><div class="long">Removes listeners that were added by the <a href="output/Ext.Component.html#Ext.Component-mon" ext:member="mon" ext:cls="Ext.Component">mon</a> method.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>item</code> : Observable|Element<div class="sub-desc">The item from which to remove a listener/listeners.</div></li><li><code>ename</code> : Object|String<div class="sub-desc">The event name, or an object containing event name properties.</div></li><li><code>fn</code> : Function<div class="sub-desc">Optional. If the <code>ename</code> parameter was an event name, this
838is the handler function.</div></li><li><code>scope</code> : Object<div class="sub-desc">Optional. If the <code>ename</code> parameter was an event name, this
839is the scope (<code>this</code> reference) in which the handler function is executed.</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.Component.html#mun" ext:member="#mun" ext:cls="Ext.Component">Component</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-nextSibling"></a><b><a href="source/Component.html#method-Ext.Component-nextSibling">nextSibling</a></b>()
840 :
841 Ext.Component<div class="mdesc"><div class="short">Returns the next component in the owning container</div><div class="long">Returns the next component in the owning container<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>Ext.Component</code><div class="sub-desc"></div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.Component.html#nextSibling" ext:member="#nextSibling" ext:cls="Ext.Component">Component</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.util.Observable-on"></a><b><a href="source/Observable.html#method-Ext.util.Observable-on">on</a></b>( <code>String eventName</code>, <code>Function handler</code>, <span title="Optional" class="optional">[<code>Object scope</code>]</span>, <span title="Optional" class="optional">[<code>Object options</code>]</span> )
842 :
843 void<div class="mdesc"><div class="short">Appends an event handler to this object (shorthand for addListener.)</div><div class="long">Appends an event handler to this object (shorthand for <a href="output/Ext.util.Observable.html#Ext.util.Observable-addListener" ext:member="addListener" ext:cls="Ext.util.Observable">addListener</a>.)<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>eventName</code> : String<div class="sub-desc">The type of event to listen for</div></li><li><code>handler</code> : Function<div class="sub-desc">The method the event invokes</div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope (<code><b>this</b></code> reference) in which the handler function is executed.
844<b>If omitted, defaults to the object which fired the event.</b></div></li><li><code>options</code> : Object<div class="sub-desc">(optional) An object containing handler configuration.</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#on" ext:member="#on" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-previousSibling"></a><b><a href="source/Component.html#method-Ext.Component-previousSibling">previousSibling</a></b>()
845 :
846 Ext.Component<div class="mdesc"><div class="short">Returns the previous component in the owning container</div><div class="long">Returns the previous component in the owning container<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>Ext.Component</code><div class="sub-desc"></div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.Component.html#previousSibling" ext:member="#previousSibling" ext:cls="Ext.Component">Component</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.util.Observable-purgeListeners"></a><b><a href="source/Observable.html#method-Ext.util.Observable-purgeListeners">purgeListeners</a></b>()
847 :
848 void<div class="mdesc"><div class="short">Removes all listeners for this object</div><div class="long">Removes all listeners for this object<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#purgeListeners" ext:member="#purgeListeners" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.util.Observable-relayEvents"></a><b><a href="source/Observable-more.html#method-Ext.util.Observable-relayEvents">relayEvents</a></b>( <code>Object o</code>, <code>Array events</code> )
849 :
850 void<div class="mdesc"><div class="short">Relays selected events from the specified Observable as if the events were fired by this.</div><div class="long">Relays selected events from the specified Observable as if the events were fired by <tt><b>this</b></tt>.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>o</code> : Object<div class="sub-desc">The Observable whose events this object is to relay.</div></li><li><code>events</code> : Array<div class="sub-desc">Array of event names to relay.</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#relayEvents" ext:member="#relayEvents" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-removeClass"></a><b><a href="source/Component.html#method-Ext.Component-removeClass">removeClass</a></b>( <code>string cls</code> )
851 :
852 Ext.Component<div class="mdesc"><div class="short">Removes a CSS class from the component's underlying element.</div><div class="long">Removes a CSS class from the component's underlying element.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>cls</code> : string<div class="sub-desc">The CSS class name to remove</div></li></ul><strong>Returns:</strong><ul><li><code>Ext.Component</code><div class="sub-desc">this</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.Component.html#removeClass" ext:member="#removeClass" ext:cls="Ext.Component">Component</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.util.Observable-removeListener"></a><b><a href="source/Observable.html#method-Ext.util.Observable-removeListener">removeListener</a></b>( <code>String eventName</code>, <code>Function handler</code>, <span title="Optional" class="optional">[<code>Object scope</code>]</span> )
853 :
854 void<div class="mdesc"><div class="short">Removes an event handler.</div><div class="long">Removes an event handler.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>eventName</code> : String<div class="sub-desc">The type of event the handler was associated with.</div></li><li><code>handler</code> : Function<div class="sub-desc">The handler to remove. <b>This must be a reference to the function passed into the <a href="output/Ext.util.Observable.html#Ext.util.Observable-addListener" ext:member="addListener" ext:cls="Ext.util.Observable">addListener</a> call.</b></div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope originally specified for the handler.</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#removeListener" ext:member="#removeListener" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-render"></a><b><a href="source/Component.html#method-Ext.Component-render">render</a></b>( <span title="Optional" class="optional">[<code>Element/HTMLElement/String container</code>]</span>, <span title="Optional" class="optional">[<code>String/Number position</code>]</span> )
855 :
856 void<div class="mdesc"><div class="short">Render this Component into the passed HTML element.
857If you are using a Container object to house this Component, then...</div><div class="long"><p>Render this Component into the passed HTML element.</p>
858<p><b>If you are using a <a href="output/Ext.Container.html" ext:cls="Ext.Container">Container</a> object to house this Component, then
859do not use the render method.</b></p>
860<p>A Container's child Components are rendered by that Container's
861<a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">layout</a> manager when the Container is first rendered.</p>
862<p>Certain layout managers allow dynamic addition of child components. Those that do
863include <a href="output/Ext.layout.CardLayout.html" ext:cls="Ext.layout.CardLayout">Ext.layout.CardLayout</a>, <a href="output/Ext.layout.AnchorLayout.html" ext:cls="Ext.layout.AnchorLayout">Ext.layout.AnchorLayout</a>,
864<a href="output/Ext.layout.FormLayout.html" ext:cls="Ext.layout.FormLayout">Ext.layout.FormLayout</a>, <a href="output/Ext.layout.TableLayout.html" ext:cls="Ext.layout.TableLayout">Ext.layout.TableLayout</a>.</p>
865<p>If the Container is already rendered when a new child Component is added, you may need to call
866the Container's <a href="output/Ext.Container.html#Ext.Container-doLayout" ext:member="doLayout" ext:cls="Ext.Container">doLayout</a> to refresh the view which causes any
867unrendered child Components to be rendered. This is required so that you can add multiple
868child components if needed while only refreshing the layout once.</p>
869<p>When creating complex UIs, it is important to remember that sizing and positioning
870of child items is the responsibility of the Container's <a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">layout</a> manager.
871If you expect child items to be sized in response to user interactions, you must
872configure the Container with a layout manager which creates and manages the type of layout you
873have in mind.</p>
874<p><b>Omitting the Container's <a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">layout</a> config means that a basic
875layout manager is used which does nothing but render child components sequentially into the
876Container. No sizing or positioning will be performed in this situation.</b></p><div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>container</code> : Element/HTMLElement/String<div class="sub-desc">(optional) The element this Component should be
877rendered into. If it is being created from existing markup, this should be omitted.</div></li><li><code>position</code> : String/Number<div class="sub-desc">(optional) The element ID or DOM node index within the container <b>before</b>
878which this component will be inserted (defaults to appending to the end of the container)</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.Component.html#render" ext:member="#render" ext:cls="Ext.Component">Component</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.util.Observable-resumeEvents"></a><b><a href="source/Observable.html#method-Ext.util.Observable-resumeEvents">resumeEvents</a></b>()
879 :
880 void<div class="mdesc"><div class="short">Resume firing events. (see suspendEvents)
881If events were suspended using the queueSuspended parameter, then all
882event...</div><div class="long">Resume firing events. (see <a href="output/Ext.util.Observable.html#Ext.util.Observable-suspendEvents" ext:member="suspendEvents" ext:cls="Ext.util.Observable">suspendEvents</a>)
883If events were suspended using the <tt><b>queueSuspended</b></tt> parameter, then all
884events fired during event suspension will be sent to any listeners now.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#resumeEvents" ext:member="#resumeEvents" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-setAutoScroll"></a><b><a href="source/BoxComponent.html#method-Ext.BoxComponent-setAutoScroll">setAutoScroll</a></b>( <code>Boolean scroll</code> )
885 :
886 Ext.BoxComponent<div class="mdesc"><div class="short">Sets the overflow on the content element of the component.</div><div class="long">Sets the overflow on the content element of the component.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>scroll</code> : Boolean<div class="sub-desc">True to allow the Component to auto scroll.</div></li></ul><strong>Returns:</strong><ul><li><code>Ext.BoxComponent</code><div class="sub-desc">this</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#setAutoScroll" ext:member="#setAutoScroll" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-setDisabled"></a><b><a href="source/Component.html#method-Ext.Component-setDisabled">setDisabled</a></b>( <code>Boolean disabled</code> )
887 :
888 Ext.Component<div class="mdesc"><div class="short">Convenience function for setting disabled/enabled by boolean.</div><div class="long">Convenience function for setting disabled/enabled by boolean.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>disabled</code> : Boolean<div class="sub-desc"></div></li></ul><strong>Returns:</strong><ul><li><code>Ext.Component</code><div class="sub-desc">this</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.Component.html#setDisabled" ext:member="#setDisabled" ext:cls="Ext.Component">Component</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-setHeight"></a><b><a href="source/BoxComponent.html#method-Ext.BoxComponent-setHeight">setHeight</a></b>( <code>Mixed height</code> )
889 :
890 Ext.BoxComponent<div class="mdesc"><div class="short">Sets the height of the component. This method fires the resize event.</div><div class="long">Sets the height of the component. This method fires the <a href="output/Ext.BoxComponent.html#Ext.BoxComponent-resize" ext:member="resize" ext:cls="Ext.BoxComponent">resize</a> event.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>height</code> : Mixed<div class="sub-desc">The new height to set. This may be one of:<div class="mdetail-params"><ul>
891<li>A Number specifying the new height in the <a href="output/Ext.BoxComponent.html#Ext.BoxComponent-getEl" ext:member="getEl" ext:cls="Ext.BoxComponent">Element</a>'s <a href="output/Ext.Element.html#Ext.Element-defaultUnit" ext:member="defaultUnit" ext:cls="Ext.Element">defaultUnit</a>s (by default, pixels).</li>
892<li>A String used to set the CSS height style.</li>
893<li><i>undefined</i> to leave the height unchanged.</li>
894</ul></div></div></li></ul><strong>Returns:</strong><ul><li><code>Ext.BoxComponent</code><div class="sub-desc">this</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#setHeight" ext:member="#setHeight" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.slider.MultiSlider-setMaxValue"></a><b><a href="source/Slider.html#method-Ext.slider.MultiSlider-setMaxValue">setMaxValue</a></b>( <code>Number val</code> )
895 :
896 void<div class="mdesc"><div class="short">Sets the maximum value for the slider instance. If the current value is more than the
897maximum value, the current valu...</div><div class="long">Sets the maximum value for the slider instance. If the current value is more than the
898maximum value, the current value will be changed.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>val</code> : Number<div class="sub-desc">The new maximum value</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">MultiSlider</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.slider.MultiSlider-setMinValue"></a><b><a href="source/Slider.html#method-Ext.slider.MultiSlider-setMinValue">setMinValue</a></b>( <code>Number val</code> )
899 :
900 void<div class="mdesc"><div class="short">Sets the minimum value for the slider instance. If the current value is less than the
901minimum value, the current valu...</div><div class="long">Sets the minimum value for the slider instance. If the current value is less than the
902minimum value, the current value will be changed.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>val</code> : Number<div class="sub-desc">The new minimum value</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">MultiSlider</td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-setPagePosition"></a><b><a href="source/BoxComponent.html#method-Ext.BoxComponent-setPagePosition">setPagePosition</a></b>( <code>Number x</code>, <code>Number y</code> )
903 :
904 Ext.BoxComponent<div class="mdesc"><div class="short">Sets the page XY position of the component. To set the left and top instead, use setPosition.
905This method fires the ...</div><div class="long">Sets the page XY position of the component. To set the left and top instead, use <a href="output/Ext.BoxComponent.html#Ext.BoxComponent-setPosition" ext:member="setPosition" ext:cls="Ext.BoxComponent">setPosition</a>.
906This method fires the <a href="output/Ext.BoxComponent.html#Ext.BoxComponent-move" ext:member="move" ext:cls="Ext.BoxComponent">move</a> event.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>x</code> : Number<div class="sub-desc">The new x position</div></li><li><code>y</code> : Number<div class="sub-desc">The new y position</div></li></ul><strong>Returns:</strong><ul><li><code>Ext.BoxComponent</code><div class="sub-desc">this</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#setPagePosition" ext:member="#setPagePosition" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-setPosition"></a><b><a href="source/BoxComponent.html#method-Ext.BoxComponent-setPosition">setPosition</a></b>( <code>Number left</code>, <code>Number top</code> )
907 :
908 Ext.BoxComponent<div class="mdesc"><div class="short">Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
909This method fires ...</div><div class="long">Sets the left and top of the component. To set the page XY position instead, use <a href="output/Ext.BoxComponent.html#Ext.BoxComponent-setPagePosition" ext:member="setPagePosition" ext:cls="Ext.BoxComponent">setPagePosition</a>.
910This method fires the <a href="output/Ext.BoxComponent.html#Ext.BoxComponent-move" ext:member="move" ext:cls="Ext.BoxComponent">move</a> event.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>left</code> : Number<div class="sub-desc">The new left</div></li><li><code>top</code> : Number<div class="sub-desc">The new top</div></li></ul><strong>Returns:</strong><ul><li><code>Ext.BoxComponent</code><div class="sub-desc">this</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#setPosition" ext:member="#setPosition" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-setSize"></a><b><a href="source/BoxComponent.html#method-Ext.BoxComponent-setSize">setSize</a></b>( <code>Mixed width</code>, <code>Mixed height</code> )
911 :
912 Ext.BoxComponent<div class="mdesc"><div class="short">Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
913either wid...</div><div class="long">Sets the width and height of this BoxComponent. This method fires the <a href="output/Ext.BoxComponent.html#Ext.BoxComponent-resize" ext:member="resize" ext:cls="Ext.BoxComponent">resize</a> event. This method can accept
914either width and height as separate arguments, or you can pass a size object like <code>{width:10, height:20}</code>.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>width</code> : Mixed<div class="sub-desc">The new width to set. This may be one of:<div class="mdetail-params"><ul>
915<li>A Number specifying the new width in the <a href="output/Ext.BoxComponent.html#Ext.BoxComponent-getEl" ext:member="getEl" ext:cls="Ext.BoxComponent">Element</a>'s <a href="output/Ext.Element.html#Ext.Element-defaultUnit" ext:member="defaultUnit" ext:cls="Ext.Element">Ext.Element.defaultUnit</a>s (by default, pixels).</li>
916<li>A String used to set the CSS width style.</li>
917<li>A size object in the format <code>{width: widthValue, height: heightValue}</code>.</li>
918<li><code>undefined</code> to leave the width unchanged.</li>
919</ul></div></div></li><li><code>height</code> : Mixed<div class="sub-desc">The new height to set (not required if a size object is passed as the first arg).
920This may be one of:<div class="mdetail-params"><ul>
921<li>A Number specifying the new height in the <a href="output/Ext.BoxComponent.html#Ext.BoxComponent-getEl" ext:member="getEl" ext:cls="Ext.BoxComponent">Element</a>'s <a href="output/Ext.Element.html#Ext.Element-defaultUnit" ext:member="defaultUnit" ext:cls="Ext.Element">Ext.Element.defaultUnit</a>s (by default, pixels).</li>
922<li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>
923<li><code>undefined</code> to leave the height unchanged.</li>
924</ul></div></div></li></ul><strong>Returns:</strong><ul><li><code>Ext.BoxComponent</code><div class="sub-desc">this</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#setSize" ext:member="#setSize" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.slider.MultiSlider-setValue"></a><b><a href="source/Slider.html#method-Ext.slider.MultiSlider-setValue">setValue</a></b>( <code>Number index</code>, <code>Number value</code>, <code>Boolean animate</code> )
925 :
926 void<div class="mdesc"><div class="short">Programmatically sets the value of the Slider. Ensures that the value is constrained within
927the minValue and maxValue...</div><div class="long">Programmatically sets the value of the Slider. Ensures that the value is constrained within
928the minValue and maxValue.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>index</code> : Number<div class="sub-desc">Index of the thumb to move</div></li><li><code>value</code> : Number<div class="sub-desc">The value to set the slider to. (This will be constrained within minValue and maxValue)</div></li><li><code>animate</code> : Boolean<div class="sub-desc">Turn on or off animation, defaults to true</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">MultiSlider</td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-setVisible"></a><b><a href="source/Component.html#method-Ext.Component-setVisible">setVisible</a></b>( <code>Boolean visible</code> )
929 :
930 Ext.Component<div class="mdesc"><div class="short">Convenience function to hide or show this component by boolean.</div><div class="long">Convenience function to hide or show this component by boolean.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>visible</code> : Boolean<div class="sub-desc">True to show, false to hide</div></li></ul><strong>Returns:</strong><ul><li><code>Ext.Component</code><div class="sub-desc">this</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.Component.html#setVisible" ext:member="#setVisible" ext:cls="Ext.Component">Component</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-setWidth"></a><b><a href="source/BoxComponent.html#method-Ext.BoxComponent-setWidth">setWidth</a></b>( <code>Mixed width</code> )
931 :
932 Ext.BoxComponent<div class="mdesc&#