Threaded View

  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