ExtJs - Dynamically changing expand and collapse buttons of panel

Question

I have a docked panel in which am changing the dock position using the setDock method. In that docked panel, I also have collapsible buttons which should change as per to the dock position. I am updating the configs collapseDirection and expandDirection and calling out a method updateCollapseTool which lets me update the button. But I get an issue after the following steps:

1. Change the dock position to left using the menu button.
2. Collapse the docked panel using the collapse button, then again expand it.
3. Again change the dock position to top.
4. Collapse the docked panel again => After this step my docked panel gets collapsed, but it seems to be collapsed in left direction. It should have collapsed to top and should show an expand button pointing in bottom direction.

If I perform the same steps by excluding the step 2, it works properly. Is there anything that am doing wrong or any other methods which lets me update my expand/collapse buttons properly ?

Here is my fiddle link.

Answer 1

You can use border layout and the the region with setRegion method, something like this:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create({
            scrollable: true,
            id: 'parentPanel',
            xtype: 'panel',
            height: 500,
            layout: 'border',
            items: [{
                xtype: 'panel',
                id: 'dockPanel1',
                region: 'north',
                title: 'Parent Dock Panel',
                collapsible: true,
                collapseFirst: false,
                width: 300,
                height: 200,
                defaults: {
                    style: {
                        background: "orange",
                        border: "1px"
                    },
                },
                layout: "container",
                tools: [{
                    text: "dock change",
                    xtype: 'button',
                    value: 'top',
                    menu: {
                        items: [{
                            text: 'top',
                            region: 'north'
                        }, {
                            text: 'left',
                            region: 'west'
                        }, {
                            text: 'right',
                            region: 'east'
                        }],
                        listeners: {
                            click: function (menu, item, e, eOpts) {
                                Ext.getCmp('dockPanel1').setRegion(item.region);
                            }
                        }
                    }
                }],
                items: [{
                    xtype: 'textfield',
                    text: 'item 1'
                }, {
                    xtype: 'textfield',
                    text: 'item 2'
                }, {
                    xtype: 'textfield',
                    text: 'item 3'
                }]
            }, {
                xtype: 'panel',
                region: 'center',
                layout: "vbox",
                items: [{
                    html: "<span style='font-size:20px;'>Child panel 1</span>",
                    bodyStyle: "background: lightgreen;",
                    xtype: 'panel',
                    height: "50%",
                    width: "70%",
                    padding: "5 5",
                    cls: 'overlayMenuCls'
                }, {
                    html: "<span style='font-size:20px;'>Child panel 2</span>",
                    bodyStyle: "background: lightblue;",
                    xtype: 'panel',
                    height: "50%",
                    width: "70%",
                    padding: "5 5",
                    cls: 'overlayMenuCls'
                }]
            }],
            renderTo: Ext.getBody()
        });
    }
});