ExtJS 4.1 layout issue after upgrade

Question

After upgrading from ExtJS 4.0.7 to 4.1, I'm facing a layout issue. There are five fields in a panel (four combos and a datepicker). This is the relevant part of the panel's config:

defaults: {
    flex: 1,
    margin: '4',
    labelAlign: 'top'
},
layout: {
    type: 'hbox',
    align: 'top'
},

With ExtJS 4.0.7, all five fields are displayed with the same width and the expected margin around each. In ExtJS 4.1, it looks like the width of the icons on the right of the text fields are not taken into account for the layout calculations.

enter image description here

Any ideas?

Wilk Wilk · Accepted Answer · 2012-05-23T00:35:05

Mmm maybe there's something else that could cause the issue. Actually, this works good for me:

Ext.create ('Ext.container.Container', {
    renderTo: Ext.getBody () ,
    layout: {
        type: 'hbox' ,
        align: 'top'
    } ,
    defaults: {
        flex: 1 ,
        labelAlign: 'top' ,
        margin: 4
    } ,
    items: [{
        xtype: 'combo'
    } , {
        xtype: 'combo'
    } , {
        xtype: 'combo'
    } , {
        xtype: 'combo'
    } , {
        xtype: 'datefield'
    }]
});

And it works with 'margin: 4' and 'margin: "4"'.

ExtJS 4.1 layout issue after upgrade

1 Answers