View Full Version : Sorting tabs in tabPanel using drag and drop

3 Oct 2012, 11:01 PM
Hi, I'd like to know if it is possible to let an user sort the tabs he opened by a drag and drop control ? Else, I think it can be done on tab insertion, but it would be smart for users to be able to sort their tabs quickly and easily.

Does anyone know how to do it ?

6 Oct 2012, 8:35 PM
You can have a look at info on dragging buttons on toolbar

Here is a version for Ext3:


6 Nov 2012, 3:21 PM
Hope there is a version of DDTabPanel for EXT4 soon.

6 Nov 2012, 4:11 PM
Using the code from the example Scott referred to you can do the following:

Ext.onReady(function () {
Ext.define('myTabPanel', {
extend: 'Ext.tab.Panel',
//require: ['Ext.ux.BoxReorderer'],
width: 400,
height: 400,
items: [{
title: 'Foo'
}, {
title: 'Bar',
tabConfig: {
title: 'Custom Title',
tooltip: 'A button tooltip'

Ext.create('myTabPanel', {
renderTo: Ext.getBody(),
tabBar: {
plugins : Ext.create('Ext.ux.BoxReorderer', {})

I commented out the require since I'm running this one from my file system, not a webserver. In which case I just linked to the BoxReorderer.js file in the ux folder under the examples folder in the sdk.