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?
2 Answers
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.
2 Comments
scott f
i figured out i needed to add the listeners inside the TabReorderer component.
Quack E. Duck
Congratulations on finding a working solution! Could you edit the information about event listeners from your comment into the answer itself? This will make your answer more likely to help someone else encountering the same problem as you did.
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
