Properties Methods Events Config Options Direct Link

    Reorderer
      ToolbarReorderer

# Class Ext.ux.ToolbarReorderer

Package: | Ext.ux
Defined In: | ToolbarReorderer.js
Class: | ToolbarReorderer
Extends: | Reorderer

Plugin which can be attached to any Ext.Toolbar instance. Provides ability to reorder toolbar items with drag and drop. Example:

    new Ext.Toolbar({
    plugins: [
    new Ext.ux.ToolbarReorderer({
    defaultReorderable: true
    })
    ],
    items: [
    {text: 'Button 1', reorderable: false},
    {text: 'Button 2'},
    {text: 'Button 3'}
    ]
    });

In the example above, buttons 2 and 3 will be reorderable via drag and drop. An event named 'reordered' is added to the Toolbar, and is fired whenever a reorder has been completed.

## Config Options

Config Options | Defined By
--- | ---
| : animate | Reorderer
| : animationDuration | Reorderer
| : defaultReorderable | Reorderer

## Public Properties

Property | Defined By
--- | ---
| buttonXCache : Object This is used to store the correct x value of each button in the array. We need to use this instead of the button's re... This is used to store the correct x value of each button in the array. We need to use this instead of the button's reported x co-ordinate because the buttons are animated when they move - if another onDrag is fired while the button is still moving, the comparison x value will be incorrect | ToolbarReorderer
| defaults : Object Object containing default values for plugin configuration details. These can be overridden when constructing the plugin | Reorderer
| target : Ext.Component Reference to the target component which contains the reorderable items | Reorderer

## Public Methods

Method | Defined By
--- | ---
| constructor( `Object config` ) : void Creates the plugin instance, applies defaults Creates the plugin instance, applies defaults Parameters: `config` : Object Optional config object Returns: void | Reorderer
| createItemDD( `Mixed button` ) : void Sets up the given Toolbar item as a draggable Sets up the given Toolbar item as a draggable Parameters: `button` : Mixed The item to make draggable (usually an Ext.Button instance) Returns: void | ToolbarReorderer
| doReorder( `Object mappings` ) : void Abstract function to perform the actual reordering. This MUST be overridden in a subclass Abstract function to perform the actual reordering. This MUST be overridden in a subclass Parameters: `mappings` : Object Mappings of the old item indexes to new item indexes Returns: void | Reorderer
| endDrag() : void After the drag has been completed, make sure the button being dragged makes it back to the correct location and reset... After the drag has been completed, make sure the button being dragged makes it back to the correct location and resets its z index Parameters: None. Returns: void | ToolbarReorderer
| getItems() : Array Returns an array of items which will be made draggable. This defaults to the contents of this.target.items, but can b... Returns an array of items which will be made draggable. This defaults to the contents of this.target.items, but can be overridden - e.g. for TabPanels Parameters: None. Returns: `Array` The array of items which will be made draggable | Reorderer
| init() : void Initializes the plugin, decorates the toolbar with additional functionality Initializes the plugin, decorates the toolbar with additional functionality Parameters: None. Returns: void | ToolbarReorderer
| initEvents() : void Adds before-reorder and reorder events to the target component Adds before-reorder and reorder events to the target component Parameters: None. Returns: void | Reorderer
| reorder( `Object mappings` ) : void Reorders the items in the target component according to the given mapping object. Example: this.reorder({ 1: 5, 3: 2 ... Reorders the items in the target component according to the given mapping object. Example: this.reorder({ 1: 5, 3: 2 }); Would move the item at index 1 to index 5, and the item at index 3 to index 2 Parameters: `mappings` : Object Object containing current item index as key and new index as property Returns: void | Reorderer

## Public Events

Event | Defined By
--- | ---
| before-reorder : ( `Object mappings`, `Mixed component`, `Ext.ux.TabReorderer this` ) Fires before a reorder occurs. Return false to cancel Fires before a reorder occurs. Return false to cancel Listeners will be called with the following arguments: `mappings` : Object Mappings of the old item indexes to new item indexes `component` : Mixed The target component `this` : Ext.ux.TabReorderer The plugin instance | Reorderer
| reorder : ( `Object mappings`, `Mixed component`, `Ext.ux.TabReorderer this` ) Fires after a reorder has occured. Fires after a reorder has occured. Listeners will be called with the following arguments: `mappings` : Object Mappings of the old item indexes to the new item indexes `component` : Mixed The target component `this` : Ext.ux.TabReorderer The plugin instance | Reorderer