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

如何解决ExtJs - 动态更改面板的展开和折叠按钮

我有一个停靠面板，其中使用 setDock 方法更改停靠位置。在那个停靠面板中，我还有可折叠的按钮，它们应该根据停靠位置而变化。我正在更新配置 collapseDirection 和 expandDirection 并调用一个方法 updateCollapsetool 来更新按钮。 但我在执行以下步骤后遇到问题：

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

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

这是我的 fiddle link。

解决方法

您可以使用边框布局和带有 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'
                },text: 'item 3'
                }]
            },{
                xtype: 'panel',region: 'center',layout: "vbox",items: [{
                    html: "<span style='font-size:20px;'>Child panel 1</span>",bodyStyle: "background: lightgreen;",height: "50%",width: "70%",padding: "5 5",cls: 'overlayMenuCls'
                },{
                    html: "<span style='font-size:20px;'>Child panel 2</span>",bodyStyle: "background: lightblue;",cls: 'overlayMenuCls'
                }]
            }],renderTo: Ext.getBody()
        });
    }
});