ExtJs 3.4 Button.show() 出现在错误的位置

【问题标题】：ExtJs 3.4 Button.show() appears in the wrong locationExtJs 3.4 Button.show() 出现在错误的位置
【发布时间】：2014-09-05 01:59:09
【问题描述】：

我有一个面板，其中有 2 个项目，一个开始按钮和一个保存按钮。开始按钮在左下角保存按钮在右下角

保存按钮是隐藏的，当使用 show() 显示时，保存按钮出现在开始按钮的顶部。如果所有这些隐藏和显示调用都被删除，那么按钮就会呈现在正确的位置，它们都是。

有人知道为什么会这样吗？

这是一个带有项目的直上面板：[startbutton, spacer, savebutton]

天哪，我真的很讨厌这个框架..

【问题讨论】：

我本想向你索取一些代码，但后来我读了你的最后一句话并改变了主意。

标签： button extjs hide show extjs3

【解决方案1】：

您可能对 ExtJS 中的布局管理感到困惑（一旦您了解了它的工作原理，这实际上是相当不错的）。此外，您还需要确保在切换元素的可见性后执行doLayout，以确保所有内容都正确放置。

看看这个jsfiddle：http://jsfiddle.net/LVKyM/

Ext.onReady(function(){

    var pnl = new Ext.Panel({
        renderTo: 'ctn-panel',
        width: 300,
        cls: 'my-pnl',
        bodyBorder: false,
        border: false,
        layout: 'hbox',
        layoutConfig: {
            padding: 5
        },
        items: [
            startBtn = new Ext.Button({
                text: 'start',
                width: 100,
                hidden: true
            }), {
                xtype: 'spacer',
                flex: 1,
            }, {
                xtype: 'button',
                text: 'save',
                width: 100
            }
        ]
    });

    new Ext.Button({
        renderTo: 'button-container',
        text: 'Show/hide',
        handler: function(){
            startBtn.show();
            pnl.doLayout();
        }
    });
});

【讨论】：