ExtJs

Question

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

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

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

这是我的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()
        });
    }
});

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

ExtJs - Dynamically changing expand and collapse buttons of panel

javascript

extjs6