View Full Version : TabReorderer plugin's reordering does not work properly if there are many tabs

kapil kashyap
4 Sep 2012, 12:17 PM

I am new to this forum and this is my first post. So please ignore if there are some mistakes. Rather I would appreciate if someone has suggestions.

I have been using TabReorderer plugin for quite some time now but have recently bumped into most probably a bug in it. Tab reordering does not work properly if there are many tabs in the tabpanel. Consider a scenario where there are many tabs in the tabpanel that scrollers are present on the tabbar. Now try to move or drag the first tab to the last position by re-ordering the tabs. You will not be able to drag the tab past the visible area due to the reason as described below.

What is happening is alignElWithMouse method under 'Ext.dd.DD' is setting the deltaSetXY position considering the width of the tabbar minus the x coordinate obtained using the getTargetCoord(iPageX, iPageY) method. iPageX is nothing but the e.getPageX(). Over here we are not considering the actual overflown width rather we are simply using the visible tabbar's width which is limiting the tab to be dragged beyond the visible area.

I override the b4Drag function in TabReorderer plugin to nullify the deltaSetXY property and update the drag elements position with events x and y position. Setting deltaSetXY to null would always evaluate the if condition in alignElWithMouse method and not go into the else block hence would not be able to restrict the tab to the visible area.

afterFirstLayout: function() {

// Add the below lines to the end of afterFirstLayout method in TabReorderer.js
Ext.apply(this.dd, {
b4Drag: this.b4Drag

// Override b4Drag method in TabReorderer.js
b4Drag: function(e) {
this.deltaSetXY = null;
this.setDragElPos(e.getPageX(), e.getPageY());

Well the main reason for posting it here is to get the code validated and get input from the experienced coders. The above solution works, but am not sure if this is the apt one. Please let me know if this is the right thing to do. If not, what should be the right approach?

*** A sample code has also been included as an after thought.

Thanks in advance,
Kapil Kashyap

4 Sep 2012, 4:58 PM
Moved to Q&A