ExtJS: 'next to centre' - extjs

Question

I'd like to achieve this in ExtJS 4.2:
e.g. a centred button, with something (a progress indicator) to its right that doesn't result in the button moving.
All my layouts are currently relative, largely using HBox & VBox, and I'd like to keep it this way rather than using anything absolute to solve this.
There are probably lots of ways to do this, but many of them will be horrible. I guess the 'floating' attribute might play a part, but I can't quite work that out.
Any suggestions?

Answer 1

Use the HBox layout's pack config to display the items in the center, and apply a margin equal to the progess bar's width to the left side of the button:
{
layout: {
type: 'hbox',
pack: 'center'
},
items: [{
xtype: 'button',
text: 'Push me',
width: 100,
margin: '0 0 0 100' // margin-left equal to the width of the progress bar
},{
xtype: 'progressbar',
width: 100
}]
}
Also check out this fiddle.

Answer 2

Here is my attempt, let me know if it's a problem.
Ext.onReady(function() {
var ct = new Ext.panel.Panel({
width: '100%',
renderTo: Ext.getBody(),
margin: 10,
border: true,
id: 'ppanel',
layout: {
type: 'hbox',
},
items: [{
xtype: 'button',
text: 'Push me',
width: 100,
id: 'bbutton'
},{
xtype: 'progressbar',
width: 100,
id: 'pbar'
}],
listeners: {
afterrender: function() {
pwidth = Ext.getCmp('ppanel').getWidth();
bwidth = Ext.getCmp('bbutton').getWidth();
button = Ext.getCmp('bbutton');
progrs = Ext.getCmp('pbar');
bmargin = (pwidth/2 - bwidth/2);
button.setMargin("0 0 0 "+bmargin);
progrs.setMargin("0 0 0 10");
}
}
});
});