scott f
scott f

Reputation: 35

drag and drop functionality for extjs tab panel

I have been searching for a way to implement drag and drop functionality for reordering tab items inside a tab panel component. I am using ExtJS 7 and as far as I know this functionality was only available back in ExtJS 4, using a plugin called Ext.ux.panel.DDTabPanel. Any ideas on if there is another way to drag and drop tab panel items?

Upvotes: 0

Views: 89

Answers (2)

Dawesi
Dawesi

Reputation: 586

Future peeps can find this in the docs for the ux Ext.ux.TabReorderer : https://docs.sencha.com/extjs/7.8.0/classic/Ext.ux.TabReorderer.html

Upvotes: 0

scott f
scott f

Reputation: 35

I found I can use the Ext.ux.TabReorderer class. Unfortunately I am having problems with hitting any of the listener events.

    var newTabPanel = Ext.create('Ext.tab.Panel', {
    plugins : Ext.create('Ext.ux.TabReorderer', {animate: false}),
    flex: 1,
    tabBar: {
        style: 'background-color: white; border-radius: 0px; margin-top: 5px; margin-right: 5px;'
    },
    listeners: {
        tabchange: 'tabChange'
    },
    items: [{
        title: 'tab 1'
    },{
        title: 'tab 2'
    },{
        title: 'tab 3'
    }]
});

i figured out i needed to add the listeners inside the TabReorderer component.

Upvotes: 0

Related Questions