Properties
Methods
Events
Config Options
Direct Link
ReordererToolbarReorderer
| Package: | Ext.ux |
| Defined In: | ToolbarReorderer.js |
| Class: | ToolbarReorderer |
| Extends: | Reorderer |
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 | Defined By | |
|---|---|---|
| : animate | Reorderer | |
| : animationDuration | Reorderer | |
| : defaultReorderable | Reorderer | |
| 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 | |
| Method | Defined By | |
|---|---|---|
constructor( Object config )
:
voidCreates the plugin instance, applies defaults Creates the plugin instance, applies defaults Parameters:
| Reorderer | |
createItemDD( Mixed button )
:
voidSets up the given Toolbar item as a draggable Sets up the given Toolbar item as a draggable Parameters:
| ToolbarReorderer | |
doReorder( Object mappings )
:
voidAbstract 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:
| 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:
| 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:
| Reorderer | |
| init()
:
void Initializes the plugin, decorates the toolbar with additional functionality Initializes the plugin, decorates the toolbar with additional functionality Parameters:
| ToolbarReorderer | |
| initEvents()
:
void Adds before-reorder and reorder events to the target component Adds before-reorder and reorder events to the target component Parameters:
| Reorderer | |
reorder( Object mappings )
:
voidReorders 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:
| Reorderer | |
| 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:
| 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:
| Reorderer | |