layout - Ext js 5 why this is happenin when create textfields? -

layout - Ext js 5 why this is happenin when create textfields? -

i want create textfields horizontally not working. neither fields width working nor fields positions. area2 filedlabel appears on previous textfiled.

here want :

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

here 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 } ] }

and can see there add together 7 text fields run there 6 textfileds ??

wyh happening.

the layout after can improve achieved by:

using container (instead of panel heavy) hbox layout improve configurable column layout using field container: http://docs.sencha.com/extjs/5.0/apidocs/#!/api/ext.form.fieldcontainer

layout width textfield extjs5