Question

我有一个面板，它有2个项目，一个开始按钮和一个保存按钮。开始按钮位于左下角保存按钮位于右下角

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

任何人都知道为什么这可能？

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

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

Answer 1

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

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

ExtJs 3.4 Button.show（）出现在错误的位置

1 个答案: