I create a nested hbox layout, and set one component's margin, but it get twice as wide as it should get.
e.g. when I set margin:2, it get a offset of 4px; when I set margin:8, it get a offset of 16px;
And at same time, I found old config margins works perfectly.

code is below:
Ext.onReady(function () {
var viewport = new Ext.Viewport(
{
layout: 'border',
items: [
{
xtype: 'container',
region: 'north',
layout: {
type:'hbox',
align: 'middle',
pack: 'start'
},
items: [
{
xtype: 'component',
//flex: 1,
width: 56,
height: 32,
style: {
borderStyle: 'solid',
borderWidth: '4px'
},
id: 'imgLogo',
margin: 2
},
{
xtype: 'container',
flex: 1,
height: 56,
style: {
borderStyle: 'solid',
borderWidth: '4px'
},
layout: {
type: 'hbox',
pack: 'end',
align: 'middle'
},
items: [
{
xtype: 'component',
width: 56,
height: 32,
style: {
borderStyle: 'solid',
borderWidth: '1px'
}
}, {
xtype: 'button',
text: 'Button 2'//,
//margins:'0 0 0 5'
}, {
xtype: 'button',
text: 'Button 3'
}, {
xtype: 'button',
text: 'Button 4'
}]
}
]
},
{
xtype: 'panel',
title: 'Navigator',
region: 'west',
width: 232,
collapsible: true,
id: 'navigator'
},
{
xtype: 'panel',
title: 'MainPanel',
region: 'center',
id: 'mainPanel'
}
]
})
});