Ext表单FieldContainer的文本字段问题

Question

我正在尝试水平创建文本字段。但是，字段宽度和位置都不是预期的。具体而言，area2 fieldlabel出现在前一个文本字段中。 下面我尝试添加7个文本字段，但在运行时，布局中只有6个文本字段。

area1：| __ | | __ | | __ | | __ | area2：| __ | area3：| _______________________________ |

这是我的源代码：

{
                        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

您可以通过以下方式更好地实现您的布局：

1. 使用容器（而不是太重的面板），hbox布局比列布局更易配置
2. 使用字段容器：http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.form.FieldContainer