ExtJs - 動態改變面板的展開和折疊按鈕

Question

我有一個停靠面板，其中正在使用 setDock 方法更改擴展塢 position。 在那個停靠的面板中，我還有可折疊的按鈕，這些按鈕應該根據停靠點 position 進行更改。 我正在更新配置 collapseDirection 和 expandDirection 並調用一個方法 updateCollapseTool 讓我更新按鈕。 但是在執行以下步驟后我遇到了一個問題：

1. 使用菜單按鈕將擴展塢 position 更改為左側。
2. 使用折疊按鈕折疊停靠的面板，然后再次展開它。
3. 再次將擴展塢 position 更改為頂部。
4. 再次折疊停靠面板 => 在此步驟之后，我的停靠面板折疊起來，但它似乎向左折疊。 它應該已經折疊到頂部，並且應該顯示一個指向底部方向的展開按鈕。

如果我通過排除步驟 2 來執行相同的步驟，它可以正常工作。 是否有任何錯誤或任何其他方法可以讓我正確更新展開/折疊按鈕？

這是我的小提琴鏈接。

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