Detach tabs from tabpanel

[dsuckau]

Hey,

I want do to the following: I have a tabpanel, which contains some simple panels. I need the panels to be detached from the tabpanel, on drag or something.

Another possibility would be, that the tabpanel contains windows, instead of panels. And if you maximize the windows, their titles should be added as tabs to the tabpanel. And on drag on the tabs, you get your normal windows back.

I already tried the last version, but the title of the window does not become a tab.

Any ideas?

Greets from Germany

[scottmartin]

This might get you going in the right direction:
http://www.sencha.com/forum/showthread.php?244892

You would have to perform the detach yourself.

SCott.

[dsuckau]

Sorry, but that is not what i meant.

The behaviour I wanted to describe, is the same like in text editors like Sublime Text. You have a tab for each of your opened files, but you can make an own window of each tab.

Animal posted a solution in this thread:
http://www.sencha.com/forum/showthre...anels-in-ExtJS

I changed it a little bit and made a class of it, because I need it generic:

/**
 * A panel that is able to undock from a tab panel into a window.
 */
Ext.define('MyApp.view.UndockablePanel', {

    extend: 'Ext.panel.Panel',
    alias: 'widget.undockablepanel',

    /**
     * The superior tab panel.
     * @property {?Ext.tab.Panel} [tabPanel=null]
     * @readonly
     */
    tabPanel: null,

    /**
     * True when panel is undocked into a window.
     * @property {Boolean} [undocked=false]
     * @readonly
     */
    undocked: false,

    /**
     * The window that contains the panel when it is undocked.
     * @property {?Ext.window.Window} [win=null]
     * @readonly
     */
    win: null,

    /**
     * Docks the panel to the superior tab panel.
     * @return {void}
     */
    dock: function () {

        var tabPanel = this.tabPanel;
        if (!tabPanel || (!tabPanel instanceof Ext.tab.Panel)) {
            return;
        }

        this.win.remove(this, false);
        tabPanel.add(this);
        this.win.destroy();
        tabPanel.setActiveTab(this);

        this.undocked = false;
        this.win = null;

    },

    /**
     * Undocks the panel from the superior tab panel.
     * @return {void}
     */
    undock: function () {

        var tabPanel = this.ownerCt;
        if (!tabPanel || (!tabPanel instanceof Ext.tab.Panel)) {
            return;
        }
        tabPanel.remove(this, false);

        var win = Ext.create('Ext.window.Window', {
            renderTo: tabPanel.getEl(),
            constrain: true,
            title: this.title,
            layout: 'fit',
            items: this,
            tools: [
                {
                    type: 'pin',
                    scope: this,
                    handler: this.dock
                }
            ]
        });

        win.setWidth(800);
        win.setHeight(400);
        win.center();
        win.show();

        this.undocked = true;
        this.tabPanel = tabPanel;
        this.win = win;

    }

}); 

But now I still have a problem. With only one tab it works perfectly, with with more than one, only the last panel with be moved into its window

var container = {
    xtype: 'tabpanel',
    items: [
        {
            xtype: 'undockablepanel',
            title: 'Tab 1',
            id: 'foo',
            tbar: [
                {
                    xtype: 'button',
                    text: 'Button 1'
                },
                '->',
                {
                    xtype: 'button',
                    text: 'Undock',
                    handler: function () {
                        this.up('undockablepanel').undock();
                    }
                }
            ]
        },
        {
            xtype: 'undockablepanel',
            title: 'Tab 2',
            id: 'foo2',
            tbar: [
                {
                    xtype: 'button',
                    text: 'Button 2'
                },
                '->',
                {
                    xtype: 'button',
                    text: 'Undock',
                    handler: function () {
                        this.up('undockablepanel').undock();
                    }
                }
            ]
        },
        {
            xtype: 'undockablepanel',
            title: 'Tab 3',
            id: 'foo3',
            tbar: [
                {
                    xtype: 'button',
                    text: 'Button 3'
                },
                '->',
                {
                    xtype: 'button',
                    text: 'Undock',
                    handler: function () {
                        this.up('undockablepanel').undock();
                    }
                }
            ]
        },
        {
            xtype: 'undockablepanel',
            title: 'Tab 4',
            id: 'foo4',
            tbar: [
                {
                    xtype: 'button',
                    text: 'Button 4'
                },
                '->',
                {
                    xtype: 'button',
                    text: 'Undock',
                    handler: function () {
                        this.up('undockablepanel').undock();
                    }
                }
            ]
        }
    ]
};