-<div xmlns:ext="http://www.extjs.com" class="body-wrap"><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">SplitBar</pre></div><h1>Class <a href="source/SplitBar.html#cls-Ext.SplitBar">Ext.SplitBar</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext</td></tr><tr><td class="label">Defined In:</td><td class="hd-info">SplitBar.js</td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/SplitBar.html#cls-Ext.SplitBar">SplitBar</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.util.Observable.html" ext:cls="Ext.util.Observable" ext:member="">Observable</a></td></tr></table><div class="description">Creates draggable splitter bar functionality from two elements (element to be dragged and element to be resized).\r
-<br><br>\r
-Usage:\r
-<pre><code><b>var</b> split = <b>new</b> Ext.SplitBar(<em>"elementToDrag"</em>, <em>"elementToSize"</em>,\r
- Ext.SplitBar.HORIZONTAL, Ext.SplitBar.LEFT);\r
-split.setAdapter(<b>new</b> Ext.SplitBar.AbsoluteLayoutAdapter(<em>"container"</em>));\r
-split.minSize = 100;\r
-split.maxSize = 600;\r
-split.animate = true;\r
+<div class="body-wrap" xmlns:ext="http://www.extjs.com"><div class="top-tools"><a class="inner-link" href="#Ext.SplitBar-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a> <a class="inner-link" href="#Ext.SplitBar-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a> <a class="inner-link" href="#Ext.SplitBar-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a> <a class="inner-link" href="#Ext.SplitBar-configs"><img src="../resources/images/default/s.gif" class="item-icon icon-config">Config Options</a> <a class="bookmark" href="../docs/?class=Ext.SplitBar"><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">SplitBar</pre></div><h1>Class <a href="source/SplitBar.html#cls-Ext.SplitBar">Ext.SplitBar</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext</td></tr><tr><td class="label">Defined In:</td><td class="hd-info"><a href="source/SplitBar.html#cls-Ext.SplitBar">SplitBar.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/SplitBar.html#cls-Ext.SplitBar">SplitBar</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.util.Observable.html" ext:cls="Ext.util.Observable" ext:member="">Observable</a></td></tr></table><div class="description">Creates draggable splitter bar functionality from two elements (element to be dragged and element to be resized).
+<br><br>
+Usage:
+<pre><code><b>var</b> split = <b>new</b> Ext.SplitBar(<em>"elementToDrag"</em>, <em>"elementToSize"</em>,
+ Ext.SplitBar.HORIZONTAL, Ext.SplitBar.LEFT);
+split.setAdapter(<b>new</b> Ext.SplitBar.AbsoluteLayoutAdapter(<em>"container"</em>));
+split.minSize = 100;
+split.maxSize = 600;
+split.animate = true;
split.on(<em>'moved'</em>, splitterMoved);</code></pre></div><div class="hr"></div><a id="Ext.SplitBar-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 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
object during initialization. This should ...</div><div class="long"><p>A config object containing one or more event handlers to be added to this
object during initialization. This should be a valid listeners config object as specified in the
mode: <em>'local'</em>,
triggerAction: <em>'all'</em>
});</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></tbody></table><a id="Ext.SplitBar-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 "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.SplitBar-animate"></a><b><a href="source/SplitBar.html#prop-Ext.SplitBar-animate">animate</a></b> : Boolean<div class="mdesc">Whether to animate the transition to the new size</div></td><td class="msource">SplitBar</td></tr><tr class="property-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.SplitBar-maxSize"></a><b><a href="source/SplitBar.html#prop-Ext.SplitBar-maxSize">maxSize</a></b> : Number<div class="mdesc">The maximum size of the resizing element. (Defaults to 2000)</div></td><td class="msource">SplitBar</td></tr><tr class="property-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.SplitBar-minSize"></a><b><a href="source/SplitBar.html#prop-Ext.SplitBar-minSize">minSize</a></b> : Number<div class="mdesc">The minimum size of the resizing element. (Defaults to 0)</div></td><td class="msource">SplitBar</td></tr><tr class="property-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.SplitBar-tickSize"></a><b><a href="source/SplitBar.html#prop-Ext.SplitBar-tickSize">tickSize</a></b> : Number<div class="mdesc">The increment, in pixels by which to move this SplitBar. When <i>undefined</i>, the SplitBar moves smoothly.</div></td><td class="msource">SplitBar</td></tr><tr class="property-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.SplitBar-useShim"></a><b><a href="source/SplitBar.html#prop-Ext.SplitBar-useShim">useShim</a></b> : Boolean<div class="mdesc">Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.</div></td><td class="msource">SplitBar</td></tr></tbody></table><a id="Ext.SplitBar-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"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.SplitBar-SplitBar"></a><b><a href="source/SplitBar.html#cls-Ext.SplitBar">SplitBar</a></b>( <code>Mixed dragElement</code>, <code>Mixed resizingElement</code>, <span title="Optional" class="optional">[<code>Number orientation</code>]</span>, <span title="Optional" class="optional">[<code>Number placement</code>]</span> )
- <div class="mdesc"><div class="short">Create a new SplitBar</div><div class="long">Create a new SplitBar<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>dragElement</code> : Mixed<div class="sub-desc">The element to be dragged and act as the SplitBar.</div></li><li><code>resizingElement</code> : Mixed<div class="sub-desc">The element to be resized based on where the SplitBar element is dragged</div></li><li><code>orientation</code> : Number<div class="sub-desc">(optional) Either Ext.SplitBar.HORIZONTAL or Ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)</div></li><li><code>placement</code> : Number<div class="sub-desc">(optional) Either Ext.SplitBar.LEFT or Ext.SplitBar.RIGHT for horizontal or\r
- Ext.SplitBar.TOP or Ext.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the initial\r
+ <div class="mdesc"><div class="short">Create a new SplitBar</div><div class="long">Create a new SplitBar<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>dragElement</code> : Mixed<div class="sub-desc">The element to be dragged and act as the SplitBar.</div></li><li><code>resizingElement</code> : Mixed<div class="sub-desc">The element to be resized based on where the SplitBar element is dragged</div></li><li><code>orientation</code> : Number<div class="sub-desc">(optional) Either Ext.SplitBar.HORIZONTAL or Ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)</div></li><li><code>placement</code> : Number<div class="sub-desc">(optional) Either Ext.SplitBar.LEFT or Ext.SplitBar.RIGHT for horizontal or
+ Ext.SplitBar.TOP or Ext.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the initial
position of the SplitBar).</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">SplitBar</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> )
:
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>
:
void<div class="mdesc"><div class="short">Destroy this splitbar.</div><div class="long">Destroy this splitbar.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>removeEl</code> : Boolean<div class="sub-desc">True to remove the element</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">SplitBar</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> )
:
- void<div class="mdesc"><div class="short">Enables events fired by this Observable to bubble up an owner hierarchy by calling
-this.getBubbleTarget() if present...</div><div class="long"><p>Enables events fired by this Observable to bubble up an owner hierarchy by calling\r
-<code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class.</p>\r
-<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\r
-implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to\r
-access the required target more quickly.</p>\r
-<p>Example:</p><pre><code>Ext.override(Ext.form.Field, {\r
- <i>// Add functionality to Field's initComponent to enable the change event to bubble\r</i>
- initComponent : Ext.form.Field.prototype.initComponent.createSequence(<b>function</b>() {\r
- this.enableBubble(<em>'change'</em>);\r
- }),\r
-\r
- <i>// We know that we want Field's events to bubble directly to the FormPanel.\r</i>
- getBubbleTarget : <b>function</b>() {\r
- <b>if</b> (!this.formPanel) {\r
- this.formPanel = this.findParentByType(<em>'form'</em>);\r
- }\r
- <b>return</b> this.formPanel;\r
- }\r
-});\r
-\r
-<b>var</b> myForm = <b>new</b> Ext.formPanel({\r
- title: <em>'User Details'</em>,\r
- items: [{\r
- ...\r
- }],\r
- listeners: {\r
- change: <b>function</b>() {\r
- <i>// Title goes red <b>if</b> form has been modified.\r</i>
- myForm.header.setStyle(<em>'color'</em>, <em>'red'</em>);\r
- }\r
- }\r
+ void<div class="mdesc"><div class="short">Enables events fired by this Observable to bubble up an owner hierarchy by calling
+this.getBubbleTarget() if present....</div><div class="long"><p>Enables events fired by this Observable to bubble up an owner hierarchy by calling
+<code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class.</p>
+<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
+implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
+access the required target more quickly.</p>
+<p>Example:</p><pre><code>Ext.override(Ext.form.Field, {
+ <i>// Add functionality to Field's initComponent to enable the change event to bubble</i>
+ initComponent : Ext.form.Field.prototype.initComponent.createSequence(<b>function</b>() {
+ this.enableBubble(<em>'change'</em>);
+ }),
+
+ <i>// We know that we want Field's events to bubble directly to the FormPanel.</i>
+ getBubbleTarget : <b>function</b>() {
+ <b>if</b> (!this.formPanel) {
+ this.formPanel = this.findParentByType(<em>'form'</em>);
+ }
+ <b>return</b> this.formPanel;
+ }
+});
+
+<b>var</b> myForm = <b>new</b> Ext.formPanel({
+ title: <em>'User Details'</em>,
+ items: [{
+ ...
+ }],
+ listeners: {
+ change: <b>function</b>() {
+ <i>// Title goes red <b>if</b> form has been modified.</i>
+ myForm.header.setStyle(<em>'color'</em>, <em>'red'</em>);
+ }
+ }
});</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.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> )
:
Boolean<div class="mdesc"><div class="short">Fires the specified event with the passed parameters (minus the event name).
git.ithinksw.org / extjs.git / blobdiff