examples/docs/output/Ext.ux.HBoxReorderer.html

   1 <div class="body-wrap" xmlns:ext="http://www.extjs.com"><div class="top-tools"><a class="inner-link" href="#Ext.ux.HBoxReorderer-props"><img src="resources/images/default/s.gif" class="item-icon icon-prop">Properties</a>&#13;<a class="inner-link" href="#Ext.ux.HBoxReorderer-methods"><img src="resources/images/default/s.gif" class="item-icon icon-method">Methods</a>&#13;<a class="inner-link" href="#Ext.ux.HBoxReorderer-events"><img src="resources/images/default/s.gif" class="item-icon icon-event">Events</a>&#13;<a class="inner-link" href="#Ext.ux.HBoxReorderer-configs"><img src="resources/images/default/s.gif" class="item-icon icon-config">Config Options</a>&#13;<a class="bookmark" href="../docs/?class=Ext.ux.HBoxReorderer"><img src="resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a>&#13;</div><div class="inheritance res-block"><pre class="res-block-inner"><a href="output/Ext.ux.Reorderer.html" ext:member="" ext:cls="Ext.ux.Reorderer">Reorderer</a>
   2   <img src="resources/elbow-end.gif">HBoxReorderer</pre></div><h1>Class <a href="source/Reorderer.html#cls-Ext.ux.HBoxReorderer">Ext.ux.HBoxReorderer</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext.ux</td></tr><tr><td class="label">Defined In:</td><td class="hd-info"><a href="source/Reorderer.html#cls-Ext.ux.HBoxReorderer">Reorderer.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/Reorderer.html#cls-Ext.ux.HBoxReorderer">HBoxReorderer</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.ux.Reorderer.html" ext:cls="Ext.ux.Reorderer" ext:member="">Reorderer</a></td></tr></table><div class="description">Description</div><div class="hr"></div><a id="Ext.ux.HBoxReorderer-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">&nbsp;</a></td><td class="sig"><a id="Ext.ux.Reorderer-"></a><b><a href="source/Reorderer.html#cfg-Ext.ux.Reorderer-null"></a></b> : animate<div class="mdesc"></div></td><td class="msource"><a href="output/Ext.ux.Reorderer.html#" ext:member="#" ext:cls="Ext.ux.Reorderer">Reorderer</a></td></tr><tr class="config-row  inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.Reorderer-"></a><b><a href="source/Reorderer.html#cfg-Ext.ux.Reorderer-null"></a></b> : animationDuration<div class="mdesc"></div></td><td class="msource"><a href="output/Ext.ux.Reorderer.html#" ext:member="#" ext:cls="Ext.ux.Reorderer">Reorderer</a></td></tr><tr class="config-row  inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.Reorderer-"></a><b><a href="source/Reorderer.html#cfg-Ext.ux.Reorderer-null"></a></b> : defaultReorderable<div class="mdesc"></div></td><td class="msource"><a href="output/Ext.ux.Reorderer.html#" ext:member="#" ext:cls="Ext.ux.Reorderer">Reorderer</a></td></tr></tbody></table><a id="Ext.ux.HBoxReorderer-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 expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.HBoxReorderer-buttonXCache"></a><b><a href="source/Reorderer.html#prop-Ext.ux.HBoxReorderer-buttonXCache">buttonXCache</a></b> : Object<div class="mdesc"><div class="short">This is used to store the correct x value of each button in the array. We need to use this
   3 instead of the button's re...</div><div class="long">This is used to store the correct x value of each button in the array. We need to use this
   4 instead of the button's reported x co-ordinate because the buttons are animated when they move -
   5 if another onDrag is fired while the button is still moving, the comparison x value will be incorrect</div></div></td><td class="msource">HBoxReorderer</td></tr><tr class="property-row  inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.Reorderer-defaults"></a><b><a href="source/Reorderer.html#prop-Ext.ux.Reorderer-defaults">defaults</a></b> : Object
   6 Object containing default values for plugin configuration details. These can be overridden when
   7 constructing the plugin<div class="mdesc"></div></td><td class="msource"><a href="output/Ext.ux.Reorderer.html#defaults" ext:member="#defaults" ext:cls="Ext.ux.Reorderer">Reorderer</a></td></tr><tr class="property-row  inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.Reorderer-target"></a><b><a href="source/Reorderer.html#prop-Ext.ux.Reorderer-target">target</a></b> : Ext.Component
   8 Reference to the target component which contains the reorderable items<div class="mdesc"></div></td><td class="msource"><a href="output/Ext.ux.Reorderer.html#target" ext:member="#target" ext:cls="Ext.ux.Reorderer">Reorderer</a></td></tr></tbody></table><a id="Ext.ux.HBoxReorderer-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">&nbsp;</a></td><td class="sig"><a id="Ext.ux.Reorderer-constructor"></a><b><a href="source/Reorderer.html#method-Ext.ux.Reorderer-constructor">constructor</a></b>(&nbsp;<code>Object&nbsp;config</code>&nbsp;)
   9     :
  10                                         void<div class="mdesc"><div class="short">Creates the plugin instance, applies defaults</div><div class="long">Creates the plugin instance, applies defaults<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>config</code> : Object<div class="sub-desc">Optional config object</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.ux.Reorderer.html#constructor" ext:member="#constructor" ext:cls="Ext.ux.Reorderer">Reorderer</a></td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.HBoxReorderer-createItemDD"></a><b><a href="source/Reorderer.html#method-Ext.ux.HBoxReorderer-createItemDD">createItemDD</a></b>(&nbsp;<code>Mixed&nbsp;button</code>&nbsp;)
  11     :
  12                                         void<div class="mdesc"><div class="short">Sets up the given Toolbar item as a draggable</div><div class="long">Sets up the given Toolbar item as a draggable<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>button</code> : Mixed<div class="sub-desc">The item to make draggable (usually an Ext.Button instance)</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">HBoxReorderer</td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.Reorderer-doReorder"></a><b><a href="source/Reorderer.html#method-Ext.ux.Reorderer-doReorder">doReorder</a></b>(&nbsp;<code>Object&nbsp;mappings</code>&nbsp;)
  13     :
  14                                         void<div class="mdesc"><div class="short">Abstract function to perform the actual reordering. This MUST be overridden in a subclass</div><div class="long">Abstract function to perform the actual reordering. This MUST be overridden in a subclass<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>mappings</code> : Object<div class="sub-desc">Mappings of the old item indexes to new item indexes</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.ux.Reorderer.html#doReorder" ext:member="#doReorder" ext:cls="Ext.ux.Reorderer">Reorderer</a></td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.HBoxReorderer-endDrag"></a><b><a href="source/Reorderer.html#method-Ext.ux.HBoxReorderer-endDrag">endDrag</a></b>()
  15     :
  16                                         void<div class="mdesc"><div class="short">After the drag has been completed, make sure the button being dragged makes it back to
  17 the correct location and reset...</div><div class="long">After the drag has been completed, make sure the button being dragged makes it back to
  18 the correct location and resets its z index<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">HBoxReorderer</td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.Reorderer-getItems"></a><b><a href="source/Reorderer.html#method-Ext.ux.Reorderer-getItems">getItems</a></b>()
  19     :
  20                                         Array<div class="mdesc"><div class="short">Returns an array of items which will be made draggable. This defaults to the contents of this.target.items,
  21 but can b...</div><div class="long">Returns an array of items which will be made draggable. This defaults to the contents of this.target.items,
  22 but can be overridden - e.g. for TabPanels<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 array of items which will be made draggable</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.ux.Reorderer.html#getItems" ext:member="#getItems" ext:cls="Ext.ux.Reorderer">Reorderer</a></td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.HBoxReorderer-init"></a><b><a href="source/Reorderer.html#method-Ext.ux.HBoxReorderer-init">init</a></b>()
  23     :
  24                                         void<div class="mdesc"><div class="short">Initializes the plugin, decorates the container with additional functionality</div><div class="long">Initializes the plugin, decorates the container with additional functionality<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">HBoxReorderer</td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.Reorderer-initEvents"></a><b><a href="source/Reorderer.html#method-Ext.ux.Reorderer-initEvents">initEvents</a></b>()
  25     :
  26                                         void<div class="mdesc"><div class="short">Adds before-reorder and reorder events to the target component</div><div class="long">Adds before-reorder and reorder events to the target component<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.ux.Reorderer.html#initEvents" ext:member="#initEvents" ext:cls="Ext.ux.Reorderer">Reorderer</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.Reorderer-reorder"></a><b><a href="source/Reorderer.html#method-Ext.ux.Reorderer-reorder">reorder</a></b>(&nbsp;<code>Object&nbsp;mappings</code>&nbsp;)
  27     :
  28                                         void<div class="mdesc"><div class="short">Reorders the items in the target component according to the given mapping object. Example:
  29 this.reorder({
  30 1: 5,
  31 3: 2
  32 ...</div><div class="long">Reorders the items in the target component according to the given mapping object. Example:
  33 this.reorder({
  34 1: 5,
  35 3: 2
  36 });
  37 Would move the item at index 1 to index 5, and the item at index 3 to index 2<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>mappings</code> : Object<div class="sub-desc">Object containing current item index as key and new index as property</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.ux.Reorderer.html#reorder" ext:member="#reorder" ext:cls="Ext.ux.Reorderer">Reorderer</a></td></tr></tbody></table><a id="Ext.ux.HBoxReorderer-events"></a><h2>Public Events</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Event</th><th class="msource-header">Defined By</th></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.Reorderer-before-reorder"></a><b><a href="source/Reorderer.html#event-Ext.ux.Reorderer-before-reorder">before-reorder</a></b> :
  38                                       (&nbsp;<code>Object&nbsp;mappings</code>,&nbsp;<code>Mixed&nbsp;component</code>,&nbsp;<code>Ext.ux.TabReorderer&nbsp;this</code>&nbsp;)
  39     <div class="mdesc"><div class="short">Fires before a reorder occurs. Return false to cancel</div><div class="long">Fires before a reorder occurs. Return false to cancel<div class="mdetail-params"><strong style="font-weight: normal;">Listeners will be called with the following arguments:</strong><ul><li><code>mappings</code> : Object<div class="sub-desc">Mappings of the old item indexes to new item indexes</div></li><li><code>component</code> : Mixed<div class="sub-desc">The target component</div></li><li><code>this</code> : Ext.ux.TabReorderer<div class="sub-desc">The plugin instance</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.ux.Reorderer.html#before-reorder" ext:member="#before-reorder" ext:cls="Ext.ux.Reorderer">Reorderer</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.Reorderer-reorder"></a><b><a href="source/Reorderer.html#event-Ext.ux.Reorderer-reorder">reorder</a></b> :
  40                                       (&nbsp;<code>Object&nbsp;mappings</code>,&nbsp;<code>Mixed&nbsp;component</code>,&nbsp;<code>Ext.ux.TabReorderer&nbsp;this</code>&nbsp;)
  41     <div class="mdesc"><div class="short">Fires after a reorder has occured.</div><div class="long">Fires after a reorder has occured.<div class="mdetail-params"><strong style="font-weight: normal;">Listeners will be called with the following arguments:</strong><ul><li><code>mappings</code> : Object<div class="sub-desc">Mappings of the old item indexes to the new item indexes</div></li><li><code>component</code> : Mixed<div class="sub-desc">The target component</div></li><li><code>this</code> : Ext.ux.TabReorderer<div class="sub-desc">The plugin instance</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.ux.Reorderer.html#reorder" ext:member="#reorder" ext:cls="Ext.ux.Reorderer">Reorderer</a></td></tr></tbody></table></div>