the proxy must also change. Below the complete source...
How can i get the new sort order?
/*
* By Jake Knerr - Copyright 2010 -
[email protected]
* Rewritten as a plugin by David Davis - http://xant.us/
*
* Version 2.0
*
* LICENSE
* GPL v3
*
*/
Ext.ux.SlidingTabs = Ext.extend( Object, {
init: function( panel ) {
panel.initTab = panel.initTab.createSequence( this.initTab, panel );
},
initTab: function( item, index ) {
if ( !this.slidingTabsID ) {
this.slidingTabsID = Ext.id();
}
new Ext.ux.DDSlidingTabs( this.getTemplateArgs( item ), this.slidingTabsID, {
tabpanel: this // Pass a reference to the tabpanel for each dragObject
});
}
});
Ext.preg( 'slidingtabs', Ext.ux.SlidingTabs );
// classes renamed so they wouldn't clash
Ext.ux.DDSlidingTabs = Ext.extend( Ext.dd.DDProxy, {
// Constructor
constructor: function() {
Ext.ux.DDSlidingTabs.superclass.constructor.apply( this, arguments );
this.setYConstraint( 0, 0, 0 ); // Lock the proxy to its initial Y coordinate
// Move the reference to the tab's tabpanel
this.tabpanel = this.config.tabpanel;
delete this.config.tabpanel;
// Set the slide duration
this.slideDuration = Ext.num( this.tabpanel.slideDuration, .1 );
},
// Pseudo Private Methods
handleMouseDown: function( e, oDD ) {
if ( ( this.primaryButtonOnly && e.button != 0 ) || this.isLocked() ) {
return;
}
this.DDM.refreshCache( this.groups );
var pt = new Ext.lib.Point( Ext.lib.Event.getPageX( e ), Ext.lib.Event.getPageY( e ) );
if ( !this.hasOuterHandles && !this.DDM.isOverTarget( pt, this ) ) {
} else {
if ( this.clickValidator( e ) ) {
this.setStartPosition(); // Set the initial element position
this.b4MouseDown( e );
this.onMouseDown( e );
this.DDM.handleMouseDown( e, this );
// this.DDM.stopEvent(e); // Must remove this event swallower for the tabpanel to work
}
}
},
startDrag: function( x, y ) {
Ext.dd.DDM.useCache = false; // Disable caching of element location
Ext.dd.DDM.mode = 1; // Point mode
this.proxyWrapper = Ext.get( this.getDragEl() ); // Grab a reference to the proxy element we are creating
this.proxyWrapper.update(); // Clear out the proxy's nodes
this.proxyWrapper.applyStyles( 'z-index:1001;border:0 none;' );
this.proxyWrapper.addClass( 'tab-proxy' );
// Use 2 nested divs to mimic the default tab styling
// You may need to customize the proxy to get it to look like your custom tabpanel if you use a bunch of custom css classes and styles
this.stripWrap = this.proxyWrapper.insertHtml( 'afterBegin', '<div class="x-tab-strip ' + ((this.tabpanel.tabPosition=='top') ? 'x-tab-strip-top ' : 'x-tab-strip-bottom ') + '"></div>', true );
this.dragEl = this.stripWrap.insertHtml( 'afterBegin','<div></div>', true );
this.tab = Ext.get( this.getEl() ); // Grab a reference to the tab being dragged
this.tab.applyStyles( 'visibility:hidden;' ); // Hide the tab being dragged
// Insert the html and css classes for the dragged tab into the proxy
this.dragEl.insertHtml( 'afterBegin', this.tab.dom.innerHTML, false );
this.dragEl.dom.className = this.tab.dom.className;
// Constrain the proxy drag in the X coordinate to the tabpanel
var panelWidth = this.tabpanel.el.getWidth();
var panelX = this.tabpanel.el.getX();
var tabX = this.tab.getX();
var tabWidth = this.tab.getWidth();
var left = tabX - panelX;
var right = panelX + panelWidth - tabX - tabWidth;
this.resetConstraints();
this.setXConstraint( left, right );
},
// credit: Ytorres http://www.extjs.com/forum/showthread.php?p=430305#post430305
onDragOver: function( e, targetArr ) {
e.stopEvent();
// Grab the tab the user has dragged the proxy over
var target = Ext.get( targetArr[ 0 ].id );
var targetWidth = target.getWidth();
var targetX = target.getX();
var targetMiddle = targetX + ( targetWidth / 2 );
var elX = this.tab.getX();
var dragX = this.proxyWrapper.getX();
var dragW = this.proxyWrapper.getWidth();
if ( dragX < targetX && ( ( dragX + dragW ) > targetMiddle ) ) {
if ( target.next() != this.tab ) {
target.applyStyles( 'visibility:hidden;' );
this.tab.insertAfter( target );
this.targetProxy = this.createSliderProxy( targetX, target );
if ( !this.targetProxy.hasActiveFx() ) {
this.animateSliderProxy( target, this.targetProxy, elX );
}
}
}
if ( dragX > targetX && ( dragX < targetMiddle ) ) {
if ( this.tab.next() != target ) {
target.applyStyles( 'visibility:hidden;' );
this.tab.insertBefore( target );
this.targetProxy = this.createSliderProxy( targetX, target );
if ( !this.targetProxy.hasActiveFx() ) {
this.animateSliderProxy( target, this.targetProxy, elX );
}
}
}
},
animateSliderProxy: function( target, targetProxy, elX ) {
targetProxy.shift({
x: elX,
easing: 'easeOut',
duration: this.slideDuration,
callback: function() {
targetProxy.remove();
target.applyStyles( 'visibility:visible;' );
},
scope:this
});
},
createSliderProxy: function( targetX, target ) {
var sliderWrapperEl = Ext.getBody().insertHtml( 'afterBegin', '<div class="tab-proxy" style="position:absolute;visibility:visible;z-index:999;left:' + targetX + 'px;"></div>', true);
sliderWrapperEl.stripWrapper = sliderWrapperEl.insertHtml( 'afterBegin', '<div class="x-tab-strip ' + ((this.tabpanel.tabPosition=='top') ? 'x-tab-strip-top ' : 'x-tab-strip-bottom ') + '"></div>', true );
sliderWrapperEl.dragEl = sliderWrapperEl.stripWrapper.insertHtml( 'afterBegin', '<div></div>', true );
sliderWrapperEl.dragEl.update( target.dom.innerHTML );
sliderWrapperEl.dragEl.dom.className = target.dom.className;
sliderWrapperEl.setTop( parseInt( target.getTop( false ) ) );
return sliderWrapperEl;
},
onDragDrop: function( e, targetId ) {
e.stopEvent();
},
endDrag: function( e ) {
this.proxyWrapper.applyStyles( 'visibility:visible;' );
// Animate the dragProxy to the proper position
this.proxyWrapper.shift({
x: this.tab.getX(),
easing: 'easeOut',
duration: this.slideDuration,
callback: function() {
this.proxyWrapper.applyStyles( 'visibility:hidden;' );
this.tab.applyStyles( 'visibility:visible;' );
// Cleanup
this.stripWrap.remove();
this.dragEl.remove();
if ( this.targetProxy ) {
this.targetProxy.stripWrapper.remove();
this.targetProxy.dragEl.remove();
}
},
scope:this
});
Ext.dd.DDM.useCache = true;
this.reorderTab();
},
reorderTab: function() {
var tabsEl = (this.tabpanel.tabPosition=='top'?this.tabpanel.header.child('ul').dom.children:this.tabpanel.footer.child( 'ul' ).dom.children),
tabsId = [],
tabsOrigin = [];
for ( var i = 0, len = tabsEl.length; i < len; i++ ) {
if ( tabsEl[ i ].id.substr( 0, this.tabpanel.id.length ) == this.tabpanel.id ) {
tabsId.push( tabsEl[ i ].id.substr( ( this.tabpanel.id.length + 2 ), tabsEl[ i ].id.length ) );
}
}
// Now, tabsId is the real list ordered of the tab's id
// We put this order into parent element
// We get the original reference of this tabs
for ( var i = 0, len = this.tabpanel.items.items.length; i < len; i++ ) {
tabsOrigin[ this.tabpanel.items.items[ i ].id ] = this.tabpanel.items.items[ i ];
}
for ( var i=0; i < tabsId.length; i++ ) {
// order the keys
this.tabpanel.items.keys[ i ] = tabsId[ i ];
// order the elements
this.tabpanel.items.items[ i ] = tabsOrigin[ tabsId[ i ] ];
}
}
});