1. #1
    Ext User
    Join Date
    Aug 2007
    Posts
    22
    Vote Rating
    0
    monsterjoe is on a distinguished road

      0  

    Default Ext.ux.DockPanel

    Ext.ux.DockPanel


    Hi everyone.
    I'm currently developing a quite large application that needs a way to let the end-user customize it's workspace according to their needs. So I'm writing this extension to allow a user to drag out of a TabPanel a tab, let him float as a window or drop it to another tab panel.

    UPDATE
    Many changes and improvements:
    - Rewritten Ext.ux.DockPanel. Now it's a plugin: Ext.ux.DockPanelPlugin. This way you can add it to every Ext.Panel extension.
    - now, when docked, the panel is added directly to the container (fixed a problem with ext 2.0 about unregister some Ext.TabPanel events. This fix is no longer needed with Ext 2.1)
    - Refactored about everything to make easier to write plugins for other containers like Panels with Accordion Layout (working on it)
    - tab reordering
    - dockOnly config option: a dockOnly:true dock panel can't float as a window.
    - closable config option support
    - Now a dock panel can be added directly to a valid container in the layout config
    Example:
    PHP Code:
    new Ext.TabPanel({
               
    border:false,
               
    activeTab:0,
               
    framefalse,
               
    style'border:1px',
               
    items: [new Ext.Panel({
                   
    id'dockonly',
                   
    title'dockonly',
                   
    html'dockonly: true',
                   
    borderfalse,
                   
    headerfalse,
                   
    dockonlytrue,
                   
    plugins: [new Ext.ux.DockPanelPlugin({
                       
    width300,
                       
    height350,
                       
    ddGroup'dock-panels'
                  
    })]
               })],
               
    plugins: [
                new 
    Ext.ux.DockTabPanelPlugin({ddGroup'dock-panels'highlightOnDrag:false})
               ]
    }) 
    UPDATE 0.5:
    - Fixed a bug related to dragging the window
    - Many changes on DragDrop object
    - Added support for the window constrain and constrainHeader options
    - Added dockLabel config option in Ext.ux.DockTabPanel plugin so you can choose what will be written in the ghost tab. 'title' will display the title panel. Else the dockLabel. default: ' '


    UPDATE 0.6:
    - Ext.ux.DockContainer: Ext.ux.DockTabPanel plugin now extends the abstract class Ext.ux.DockContainer
    - Ext.ux.DockContainer.defaults to set standard config options for all dock containers
    - Ext.ux.DockPanel.defaults to set standard config options for all dock panels
    - Fixed some other bugs
    Added 2 config options (see south-west region in demo):
    - maskText (eg: 'drop here'): if set in a DockTabPanel () will mask the TabPanel on enter
    - hideOnEnter: if set on a DockPanel hides the window on enter a valid drop zone

    After investigating Animal suggestion I decided to not use a proxy to undock the panel only after drop in a valid DropTarget. For each DockPanel I create only a window: hidden when the panel is docked. And using a proxy I have to handle different possible ownerCt: Undocking the panel immediately, ownerCt is the window. This simplifies tab reordering for example and many other things.

    UPDATE 1.0a
    Alpha quality. Still many things to do...
    update: uploaded the wrong file. Now it's the right one.

    TODO:
    New features:
    - accordion layout plugin to make it a valid container
    - State manager support

    Bugs:
    - little problem related to scrolling TabPanel when dragging out a panel
    - if a TabPanel is in scroll state with animScroll:true tab reordering does not properly work.

    Improvements:
    - change mouse icon to show invalid drop when dockOnly:true

    Live demo:
    http://www.polomuseale.firenze.it/ext/test/test.html
    Attached Files
    Last edited by monsterjoe; 3 Jun 2008 at 2:17 AM. Reason: Update

  2. #2
    Ext JS Premium Member Foggy's Avatar
    Join Date
    Apr 2007
    Location
    Switzerland
    Posts
    477
    Vote Rating
    0
    Foggy is on a distinguished road

      0  

    Default


    Uhh, thats really nice. Maybe a visuell feedback where the panel can be docked would be nice...
    Can these panels only be docked as a tabPanel?

  3. #3
    Ext JS Premium Member
    Join Date
    May 2007
    Posts
    698
    Vote Rating
    3
    danh2000 is on a distinguished road

      0  

    Default


    Hi,

    Good effort - I'm sure this functionality would come in handy.

    I've just tried on IE6 -it's very buggy I'm afraid, dropping the window causes many tabs to be added to the drop target continuously.

    This tool may help you to test - it allows you to install multiple version of IE on your machine:

    http://tredosoft.com/Multiple_IE

    (disclaimer - I haven't used the tool above- it was the first that came up in a Google search, but there are many similar tools.)

    In firefox, I couldn't dock the window in the center region at all, but could dock it everywhere else.

    I also think a Ghosted drop-target as you hover over drop-zones would be a good addition.

    Hope that helps,

  4. #4
    Ext JS Premium Member Foggy's Avatar
    Join Date
    Apr 2007
    Location
    Switzerland
    Posts
    477
    Vote Rating
    0
    Foggy is on a distinguished road

      0  

    Default


    The tredosoft multiple ie solution is nice, but their behavior is really different to the original IE installations...
    But thats just my experience

  5. #5
    Ext User
    Join Date
    Aug 2007
    Posts
    22
    Vote Rating
    0
    monsterjoe is on a distinguished road

      0  

    Default


    Quote Originally Posted by danh2000 View Post
    In firefox, I couldn't dock the window in the center region at all, but could dock it everywhere else.
    Yes. The center region is not a dock target. It's easy to make it a drop target using the plugin like others TabPanel in the example.

    Quote Originally Posted by danh2000 View Post
    I've just tried on IE6 -it's very buggy I'm afraid, dropping the window causes many tabs to be added to the drop target continuously.

    This tool may help you to test - it allows you to install multiple version of IE on your machine:

    http://tredosoft.com/Multiple_IE

    (disclaimer - I haven't used the tool above- it was the first that came up in a Google search, but there are many similar tools.)

    Hope that helps,
    Sure!

    Quote Originally Posted by danh2000 View Post
    I also think a Ghosted drop-target as you hover over drop-zones would be a good addition.

    Sure. The first thing I'll check when the whole thing will be stable.
    I think the problem in ie6 is somehow like the one with ie7.
    I hope to fix it today.
    Thx for your feedback

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Very nice!

    I think a visual treatment of the tab strip when dropping is valid is needed. Should be just a matter of implementing onDragEnter and onDragOut in the DockWindow's DD to add/remove a configured class name to the tab strip.

  7. #7
    Ext User
    Join Date
    Aug 2007
    Posts
    22
    Vote Rating
    0
    monsterjoe is on a distinguished road

      0  

    Default


    Quote Originally Posted by Foggy View Post
    Uhh, thats really nice. Maybe a visuell feedback where the panel can be docked would be nice...
    Can these panels only be docked as a tabPanel?
    Yes. Maybe in the future I can add support for the Accordion. But at the moment there's enough to do to make it stable.

  8. #8

  9. #9
    Ext User
    Join Date
    Aug 2007
    Posts
    22
    Vote Rating
    0
    monsterjoe is on a distinguished road

      0  

    Default


    I think now the problem with ie is fixed.

  10. #10
    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


    Woooooooooooooo!

    Excellent work!!