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

   1 <div class="body-wrap" xmlns:ext="http://www.extjs.com"><div class="top-tools"><a class="inner-link" href="#Ext.ux.ToolbarReorderer-props"><img src="resources/images/default/s.gif" class="item-icon icon-prop">Properties</a>&#13;<a class="inner-link" href="#Ext.ux.ToolbarReorderer-methods"><img src="resources/images/default/s.gif" class="item-icon icon-method">Methods</a>&#13;<a class="inner-link" href="#Ext.ux.ToolbarReorderer-events"><img src="resources/images/default/s.gif" class="item-icon icon-event">Events</a>&#13;<a class="inner-link" href="#Ext.ux.ToolbarReorderer-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.ToolbarReorderer"><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>&#13;&nbsp;&nbsp;<img src="resources/elbow-end.gif">ToolbarReorderer</pre></div><h1>Class <a href="source/ToolbarReorderer.html#cls-Ext.ux.ToolbarReorderer">Ext.ux.ToolbarReorderer</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/ToolbarReorderer.html#cls-Ext.ux.ToolbarReorderer">ToolbarReorderer.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/ToolbarReorderer.html#cls-Ext.ux.ToolbarReorderer">ToolbarReorderer</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">Plugin which can be attached to any Ext.Toolbar instance. Provides ability to reorder toolbar items
   2 with drag and drop. Example:
   3 <pre>
   4 new Ext.Toolbar({
   5 plugins: [
   6 new Ext.ux.ToolbarReorderer({
   7 defaultReorderable: true
   8 })
   9 ],
  10 items: [
  11 {text: 'Button 1', reorderable: false},
  12 {text: 'Button 2'},
  13 {text: 'Button 3'}
  14 ]
  15 });
  16 </pre>
  17 In the example above, buttons 2 and 3 will be reorderable via drag and drop. An event named 'reordered'
  18 is added to the Toolbar, and is fired whenever a reorder has been completed.</div><div class="hr"></div><a id="Ext.ux.ToolbarReorderer-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.ToolbarReorderer-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.ToolbarReorderer-buttonXCache"></a><b><a href="source/ToolbarReorderer.html#prop-Ext.ux.ToolbarReorderer-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
  19 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
  20 instead of the button's reported x co-ordinate because the buttons are animated when they move -
  21 if another onDrag is fired while the button is still moving, the comparison x value will be incorrect</div></div></td><td class="msource">ToolbarReorderer</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
  22 Object containing default values for plugin configuration details. These can be overridden when
  23 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
  24 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.ToolbarReorderer-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;)
  25     :
  26                                         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.ToolbarReorderer-createItemDD"></a><b><a href="source/ToolbarReorderer.html#method-Ext.ux.ToolbarReorderer-createItemDD">createItemDD</a></b>(&nbsp;<code>Mixed&nbsp;button</code>&nbsp;)
  27     :
  28                                         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">ToolbarReorderer</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;)
  29     :
  30                                         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.ToolbarReorderer-endDrag"></a><b><a href="source/ToolbarReorderer.html#method-Ext.ux.ToolbarReorderer-endDrag">endDrag</a></b>()
  31     :
  32                                         void<div class="mdesc"><div class="short">After the drag has been completed, make sure the button being dragged makes it back to
  33 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
  34 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">ToolbarReorderer</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>()
  35     :
  36                                         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,
  37 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,
  38 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.ToolbarReorderer-init"></a><b><a href="source/ToolbarReorderer.html#method-Ext.ux.ToolbarReorderer-init">init</a></b>()
  39     :
  40                                         void<div class="mdesc"><div class="short">Initializes the plugin, decorates the toolbar with additional functionality</div><div class="long">Initializes the plugin, decorates the toolbar 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">ToolbarReorderer</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>()
  41     :
  42                                         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;)
  43     :
  44                                         void<div class="mdesc"><div class="short">Reorders the items in the target component according to the given mapping object. Example:
  45 this.reorder({
  46 1: 5,
  47 3: 2
  48 ...</div><div class="long">Reorders the items in the target component according to the given mapping object. Example:
  49 this.reorder({
  50 1: 5,
  51 3: 2
  52 });
  53 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.ToolbarReorderer-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> :
  54                                       (&nbsp;<code>Object&nbsp;mappings</code>,&nbsp;<code>Mixed&nbsp;component</code>,&nbsp;<code>Ext.ux.TabReorderer&nbsp;this</code>&nbsp;)
  55     <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> :
  56                                       (&nbsp;<code>Object&nbsp;mappings</code>,&nbsp;<code>Mixed&nbsp;component</code>,&nbsp;<code>Ext.ux.TabReorderer&nbsp;this</code>&nbsp;)
  57     <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>