1. #71
    Sencha User
    Join Date
    Oct 2007
    Location
    Berlin, Germany
    Posts
    891
    Vote Rating
    9
    wm003 will become famous soon enough

      0  

    Default


    tabsEl is defined within Ext.ux.DDSlidingTab, so it's correctly:

    Code:
    ...
        ,reorderTab: function() {
            var tabsEl = (this.tabpanel.tabPosition=='top'?this.tabpanel.header.child('ul').dom.children:this.tabpanel.footer.child( 'ul' ).dom.children),
    ...

  2. #72
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    676
    Vote Rating
    12
    Dumbledore will become famous soon enough

      0  

    Default


    the proxy must also change. Below the complete source...

    How can i get the new sort order?


    Code:
    /*
     * By Jake Knerr - Copyright 2010 - supersonicecho@gmail.com
     * 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 ] ];
            }
        }
    
    });

  3. #73
    Sencha User
    Join Date
    Oct 2007
    Location
    Berlin, Germany
    Posts
    891
    Vote Rating
    9
    wm003 will become famous soon enough

      0  

    Default


    Quote Originally Posted by Dumbledore View Post
    How can i get the new sort order?
    The new order is stored in

    Code:
    this.tabpanel.items[.keys|.items]

  4. #74
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    676
    Vote Rating
    12
    Dumbledore will become famous soon enough

      0  

    Default


    nice, thanks!


    it runs fine, but i need an event when the drag/drop is over... Perhaps we should add an fireEvent inside reorderTab?

  5. #75
    Sencha User
    Join Date
    Oct 2007
    Location
    Berlin, Germany
    Posts
    891
    Vote Rating
    9
    wm003 will become famous soon enough

      0  

    Default


    Quote Originally Posted by Dumbledore View Post
    it runs fine, but i need an event when the drag/drop is over... Perhaps we should add an fireEvent inside reorderTab?
    Yes, that would be the way to go, if you need such a feature

  6. #76
    Sencha User
    Join Date
    Aug 2010
    Posts
    11
    Vote Rating
    0
    kof720551 is on a distinguished road

      0  

    Default


    I use slidingtabs in Ext.Window,but show wrong.
    How can i show it normal in Ext.Window?

    Code:
    <html>
        
        <head>
            <title>
                Chrome Style Sliding Tabs
            </title>
            <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css"
            />
            <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js">
            </script>
            <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/ext-all.js">
            </script>
            <script type="text/javascript" src="pluging_slidingtabs.js">
            </script>
            <script type="text/javascript" src="TabCloseMenu.js">
            </script>
            <style type="text/css">
                body {}
            </style>
            <script type="text/javascript">
                Ext.onReady(function() {
    
                    window.loaded = true;
    
                    var tabs = new Ext.TabPanel({
                        id: 'tabs1',
                        activeTab: 0,
                        resizeTabs: true,
                        // turn on tab resizing
                        slideDuration: .15,
                        defaults: {
                            bodyStyle: 'padding:10px;'
                        },
                        enableTabScroll: true,
                        layoutOnTabChange: true,
                        plugins: ['slidingtabs', 'tabclosemenu'],
                        defaults: {
                            autoScroll: true
                        },
    
                        items: [{
                            title: 'Bogus Tab',
                            closable: false
                        }]
                    });
    
                    // Tab generation code
                    var index = 0;
                    while (index < 4) {
                        addTab();
                    }
    
                    function addTab() {
                        tabs.add({
                            title: 'New Tab ' + (++index),
                            html: 'Tab Body ' + (index) + '<br/><br/><div>Bogus Markup</div>',
                            closable: true
                        }).show();
                    }
    
                    new Ext.Button({
                        text: 'Add A New Tab',
                        handler: addTab
                    });
                    var win = new Ext.Window({
                        items: [tabs]
                    });
                    win.show();
                });
            </script>
        </head>
        
        <body>
            <div id="tabs" style="margin:15px 0;">
            </div>
        </body>
    
    </html>

  7. #77
    Sencha User
    Join Date
    Aug 2010
    Posts
    9
    Vote Rating
    0
    growler is on a distinguished road

      0  

    Default


    Hi. Thanks for plugin.

    Was easy to include Ajax here.
    Also I have found 1 bug:
    If You scrolled page down(I have big page) - Your sorting jumps.
    I meen function have no scroll corection.

    Thanks.

    PS: Sorry for my bad english. Im beginer in english.

  8. #78
    Sencha User
    Join Date
    Aug 2010
    Posts
    2
    Vote Rating
    0
    shalmali is on a distinguished road

      0  

    Default


    Great feature! Thanks!

    I used the code for the plugin that has been posted here. However my tab sliding is not as smooth as in the demo. I read through the code, but I haven't been able to see what causes the tab drag-drop to be as smooth as the demo.

    Can anyone give me any leads as to what I need to modify to make this happen?

  9. #79
    Sencha User
    Join Date
    Mar 2011
    Posts
    12
    Vote Rating
    0
    mjbcesar is on a distinguished road

      0  

    Default


    Has anyone ported this to ExtJs4? I tried but my knowledge of ExtJs isn't enough (yet) to do it myself...

  10. #80
    Sencha User
    Join Date
    Nov 2010
    Posts
    2
    Vote Rating
    0
    fsiatama is on a distinguished road

      0  

    Default


    this solution worked perfectly