Extjs 4.1.1 HBox layout not showing all child items or items overlaps

Question

I am using layout: 'hbox'for a container and this contain has four child items as below

1. label
2. Continer having textfield and div for message
3. label
4. Container having textfield and div for message

I want all these four elements to be displayed horizontally in single line, that's why I used HBox layout, but its showing only first two child items. I looked up generated html and found that items 3 and 4 are generated but are getting position incorrectly.

Here is jsfiddle link for below code http://jsfiddle.net/5znVE/

Ext.create('Ext.Panel', {
    renderTo: Ext.getBody(),
    width: '100%',
    bodyPadding: 10,
    items: [{
        xtype: 'container',
        id: 'chkNumberCtnr',
        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        items: [{
            xtype: 'label',
            cls: 'field-label',
            text: 'from Check Number',
        }, {
            xtype: 'container',
            id: 'frmChkFldCntr',
            cls: 'field-container',
            items: [{
                xtype: 'textfield',
                id: 'fromChk'
            }, {
                xtype: 'container',
                id: 'frmChkMessage',
                cls: 'error-message',
                html: '<div>This is required field</div>'
            }]
        }, {
            xtype: 'label',
            text: 'to Check Number'
        },{
            xtype: 'container',
            id: 'toChkFldCntr',
            cls: 'field-container',
            items: [{
                xtype: 'textfield',
                id: 'toChk'
            }, {
                xtype: 'container',
                id: 'toChkMessage',
                cls: 'error-message',
                html: '<div>This is required field</div>'
            }]
        }]
    }


    ]
});

Answer 1

Add flex: 1 to all four of your child items in order to have them size automatically to fill the available width.