javascriptcssextjsextjs7

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?

Solution

  • 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.