Hybrid View

  1. #1
    Ext User Matti's Avatar
    Join Date
    Jul 2008
    Location
    Belgium
    Posts
    9
    Vote Rating
    0
    Matti is on a distinguished road

      0  

    Default Ext.ux.panel.DDTabPanel

    Ext.ux.panel.DDTabPanel


    Ext.ux.panel.DDTabPanel extends Ext.TabPanel to support drag and drop operations to re-order the tabs.

    This extension is the result of the work done in the topic "Draggable Panel in a TabPanel". When I started using the code in that thread, I found that clicking a tab to activate it didn't work any longer, you had to start dragging for it to activate. After some investigation, this was fixed by adding an onMouseDown event to activate the tab. As suggested by mabello, I decided to publish this great piece of work by giving it its own topic and by publishing it on the UX Repository.

    This extension is based on the code of thommy and rizjoj and was then fixed, polished and published by myself.

    Demo: http://extjs-ux.org/repo/authors/Mat...anel/demo.html
    JS File: http://extjs-ux.org/repo/authors/Mat.../DDTabPanel.js
    CSS: http://extjs-ux.org/repo/authors/Mat...DDTabPanel.css
    UX Repository: http://extjs-ux.org/docs/index.html?...nel.DDTabPanel

    Okay, it's in the repository now. Some small adjustments to the documentation have been done which will be reflected in the repository in approximately an hour (the interval between two repository updates).

    This thread is open for suggestions, questions, bug reports and appreciations!

    Known bugs:
    • None, yay!
    Limitations:
    • The tab panel can't be made stateful.
      It'd be very hard to do this as the default tab panel itself doesn't seem to support this either. Seen from a developer's point, it would be very hard too as some tabs are loaded dynamically through AJAX requests and such, how would one save those in a cookie?
    To-do's:
    • Allow tabs to be dropped on another tab panel by joining the drag and drop sources and targets.
    Changelog:
    • 1.0.7 (Jan 16, 2009)
      • Implemented some more code optimizations from mystix.
    • 1.0.6 (Jan 10, 2009)
    • 1.0.5 (Dec 31, 2008)
      • Tabs with an iconCls now have a left padding on the ghost text.
    • 1.0.4 (Dec 19, 2008)
      • Fixed bug with west region and code is much cleaner now.
    • 1.0.3 (Dec 19, 2008)
      • Fixed activeTab configuration not working.
      • Added configuration option and method for tabs to enable/disable drag and drop on a per-tab basis.
    • 1.0.2 (Dec 18, 2008)
      • Fixed conflict between multiple DDTabPanels.
    • 1.0.1 (Dec 18, 2008)
      • Initial release.
    Last edited by Matti; 16 Jan 2009 at 9:43 AM. Reason: Updated to version 1.0.7

  2. #2
    Sencha User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    583
    Vote Rating
    0
    mabello is on a distinguished road

      0  

    Default


    Matti,
    Thanks for doing that.
    You made an excellent job.
    Keep up the good work!

  3. #3
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    Excellent work!!

    Thanks for share,

  4. #4
    Ext User
    Join Date
    May 2008
    Posts
    59
    Vote Rating
    0
    gthe is on a distinguished road

      0  

    Default


    Thanks!
    What about statefull panel order ?

  5. #5
    Ext User Matti's Avatar
    Join Date
    Jul 2008
    Location
    Belgium
    Posts
    9
    Vote Rating
    0
    Matti is on a distinguished road

      0  

    Default


    Quote Originally Posted by gthe View Post
    Thanks!
    What about statefull panel order ?
    Very good remark.
    It seems like this doesn't work properly. I also found that multiple DDTabPanels seem to interfere with each other when dragging a tab. Further investigation will follow in how to solve these problems.

  6. #6
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    +10. great job.

    p.s. a draggable option on each "tab" would be good.

  7. #7
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    Hi,

    What about this extension: http://extjs.com/forum/showthread.php?t=32485

    Here is demo: http://www.polomuseale.firenze.it/ext/test/test.html#

    I prefer ghost dragging


    Greetings,

  8. #8
    Ext User
    Join Date
    Mar 2008
    Location
    Poland
    Posts
    17
    Vote Rating
    0
    mholyszko is on a distinguished road

      0  

    Default


    Hello,

    Thank you very much for this extension!

    There is, unfortunately, a problem with tabs dragging when 'west' region is set. Something is wrong with calculating X offset where to put a dragged tab. Please try adding this to the first window items in the demo file and try it yourself:
    PHP Code:
    {
         
    region'west',
         
    width200,
         
    html'test'
    }, 
    Moreover, I have the issue with drag "tip" rendering when tab has an icon set by iconCls property (see attached screenshot).

    I would be very grateful if you could fix these issues.
    Attached Images

  9. #9
    Sencha User
    Join Date
    Mar 2008
    Posts
    566
    Vote Rating
    0
    moegal is on a distinguished road

      0  

    Default


    Doesn't seem to work in IE. This is a great extension though.

    Marty

  10. #10
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,353
    Vote Rating
    33
    arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough

      0  

    Default


    I noticed that the demo page only worked if I enabled debugging in Firebug. I was convinced the page wasn't working until I started to write this comment and went back to look for an error.

    That being said, I'm excited by this extension and I'm going to try it out.
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group