ExtJs 3.4 Button.show() appears in the wrong location

Question

I have a panel which have 2 items, a start button and a save button. the start button is at the bottom left corner the save button is at the bottom right corner

the save button is hidden, when shown using show() the save button appears on top of the start button. If all these hide and show calls are removed the buttons rendered in the correct location, both of them.

Anyone know why this maybe ?

It is a straight up panel with items: [startbutton, spacer, savebutton]

Oh god I really hate this one framework..

Answer 1

You're probably confused about the layout management in ExtJS (which is actually quite nice once you understand how it works). Also you want to make sure that you perform a doLayout after you've toggled an element's visibility to make sure that everything gets placed properly.

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