I have a simple hbox layout containing buttons for a media player.

Code:
{
                xtype: 'container',
                layout: 'hbox',
                ref: 'buttonsSet',
                items: [  
                {
                    xtype: 'button',
                    text: '|<<',
                    width: 24,
                    ref: 'prevButton'
                },
                {
                    //spacer
                    width: 2
                },
                {
                    xtype:'button',
                    text: '|>',
                    width: 24,
                    ref: 'playButton'
                },
                {
                    xtype:'button',
                    text: '||',
                    width: 24,
                    ref: 'pauseButton',
                    hidden: true
                },
                {
                    //spacer
                    width: 2
                },
                {
                    xtype:'button',
                    text: '>>|',
                    width: 24,
                    ref: 'nextButton',
                    disabled: true
                }]
}
Initially the pause button is hidden and then 'switched' with the play button once a track begins playing:

Code:
this.buttonsSet.playButton.hide();
this.buttonsSet.pauseButton.show();
The pause button appears behind the first button in the hbox. When the user scrolls or resizes on the iPad it then snaps into its intended position. I have tried all combinations and places for doLayout() with no success.

This is an iPad issue (works fine everywhere else), but, is there anything I can do on the EXTJS side to force the iPad to re-evaluate the layout without user interaction? Open to any suggestions.

[iPad1/Safari/iOS]