Reorder TabPanel with drag and drop

Based on the excellent Ext.ux.panel.DDTabPanel, in particular the version that includes the reorder event but refactored into a plugin. Note, this plugin is for Ext JS 3.x only, not Ext JS 4.

View the source of this page to see the full code for the plugin.

Example 1

Standard Ext.TabPanel. The bottom toolbar has a button to add more tabs, which will automatically take part in the drag/drop.

View the source to see an example of how the reorder event can be used.

Example 2

In this example, tabs are configured to appear at the bottom and tab scrolling is disabled (a limitation in Ext JS 3.x — in Ext JS 4, tabs rendered at the bottom can also scroll)

Back to original post