Text fields issue with Ext form FieldContainer

Question

I am trying to create text fields horizontally. However, neither fields width nor positions are as expected. In specific, area2 fieldlabel appears on previous text field. Below I attempt to add 7 text fields but on run there is only 6 text fields in the layout.

area1 :|__ | |__ | |__ | |__ | area2: |__| area3 :|_______________________________|

here is my source code :

{
                        xtype: 'panel',
                        border:true,
                        bodyPadding:5,
                        width :861,
                        layout:'column',
                        items:[ {
                                    xtype       : 'textfield',
                                    fieldLabel  : 'area1',
                                    width       : 100,

                                 },
                                 {
                                    xtype       : 'textfield',
                                    width       :50,
                                },{
                                    xtype       : 'textfield',
                                    width       :50,
                                },{
                                    xtype       : 'textfield',
                                    width       :50,
                                },
                                {
                                    xtype       : 'textfield',
                                    width       :50,
                                },
                                {
                                    xtype       : 'textfield',
                                    fieldLabel  :'area2',
                                    width       :100,
                                },
                                {
                                    xtype       : 'textfield',
                                    fieldLabel  :' area3',
                                    width       :400
                                }

                        ]   
                    }

Answer 1

The layout you are after can be better achieved by:

1. using container (instead of panel that is too heavy) with hbox layout that is better configurable than column layout
2. using field container: http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.form.FieldContainer