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

我有一个停靠面板，在其中使用setDock方法更改停靠位置。在停靠面板中，我还有可折叠按钮，这些按钮应根据停靠位置的不同而变化。我正在更新configs collapseDirection和expandDirection，并调用一个方法updateCollapseTool，该方法允许我更新按钮。 但经过以下步骤后，我遇到了一个问题：

使用菜单按钮将停靠位置更改为左侧

使用折叠按钮折叠固定面板，然后再次展开

再次将停靠位置更改为顶部

再次折叠停靠面板=>此步骤后，我的停靠面板将折叠，但它似乎在左方向折叠。它应该折叠到顶部，并且应该显示一个指向底部方向的展开按钮

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

---

这是我的。

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

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

Ext.application({
名字：“小提琴”，
启动：函数（）{
外部创建({
可滚动：对，
id:“父面板”，
xtype:'面板'，
身高：500，
布局：“边框”，
项目：[{
xtype:'面板'，
id:'dockPanel1'，
地区：'北'，
标题：“父停靠面板”，
可折叠的：是的，
collapseFirst:false，
宽度：300，
身高：200，
默认值：{
风格：{
背景：“橙色”，
边框：“1px”
},
},
布局：“容器”，
工具：[{
文本：“停靠更改”，
xtype:'按钮'，
值：'top'，
菜单：{
项目：[{
文本：“顶部”，
地区：“北部”
}, {
文本：“左”，
地区：“西部”
}, {
文字：‘右’，
地区：'东部'
}],
听众：{
单击：功能（菜单、项目、e、eOpts）{
Ext.getCmp（'dockPanel1'）.setRegion（item.region）；
}
}
}
}],
项目：[{
xtype:'textfield'，
正文：“项目1”
}, {
xtype:'textfield'，
正文：“项目2”
}, {
xtype:'textfield'，
正文：“项目3”
}]
}, {
xtype:'面板'，
地区：'中心'，
布局：“vbox”，
项目：[{
html：“子面板1”，
车身样式：“背景：浅绿色；”，
xtype:'面板'，
身高：“50%”，
宽度：“70%”，
填充：“5”，
cls:“overlayMenuCls”
}, {
html：“子面板2”，
车身风格：“背景：浅蓝色；”，
xtype:'面板'，
身高：“50%”，
宽度：“70%”，
填充：“5”，
cls:“overlayMenuCls”
}]
}],
renderTo:Ext.getBody（）
});
}
});

我想避免在特定用例中使用边框布局。但是，谢谢你的回答，因为这是另一种方法。另外，在调查ExtJs代码并从dock面板中删除reExpander之后，我的问题得到了解决。我已更新了fiddle链接：