ExtJs - 动态改变面板的展开和折叠按钮

Question

我有一个停靠面板，在其中使用 setDock 方法更改停靠位置。在那个停靠的面板中，我还有可折叠的按钮，这些按钮应该根据停靠位置进行更改。我正在更新配置 collapseDirection 和 expandDirection 并调用一个方法 updateCollapseTool 让我更新按钮。 但是在执行以下步骤后我遇到了一个问题：

1. 使用菜单按钮将停靠位置更改为左侧。
2. 使用折叠按钮折叠停靠的面板，然后再次展开。
3. 再次将停靠位置更改为顶部。
4. 再次折叠停靠面板 => 完成此步骤后，停靠面板折叠，但似乎向左折叠。它应该已经折叠到顶部，并且应该显示一个指向底部方向的展开按钮。

如果我通过排除步骤 2 来执行相同的步骤，它可以正常工作。是否有任何错误或任何其他方法可以让我正确更新展开/折叠按钮？

这是我的fiddle link。

Answer 1

您可以使用 setRegion 方法使用边框布局和区域，如下所示：

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()
        });
    }
});