Ext 表单 FieldContainer 的文本字段问题

Question

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

区域 1 :|__ | |__ | |__ | |__ |区域2：|__|区域3 :|_______________________________|

这是我的源代码：

{
                        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