使用HBox布局时，Extjs字段重叠

我很难使ExtJS字段集元素在没有重叠的情况下正确显示。我使用一个FieldSet类，每一行都是一个hbox容器。我的目标是让布局保持不变，但如果需要，会以某种方式使值自动显示在多行上

下面是我的代码的示例和屏幕截图

var geninfo字段集=新的Ext.form.FieldSet({
标题：“测试字段集”，
高度：“100%”，
自动宽度：正确，
项目：[
//第1行
{
xtype:'容器'，
布局：“hbox”，
默认值：{labelWidth:120，align:'stretch'，labelStyle:'font-weight:bold；font-size:11px'，flex:1，
fieldStyle:'字体大小：11px'
},
项目：[
{
xtype:'displayfield'，
fieldLabel:“字段1”，
值：“abcdesdavba”
},
{
xtype:'displayfield'，
字段标签：“字段2”，
值：“ZXCVZXVCZXZX”
},
{
xtype:'displayfield'，
字段标签：“字段3”，
值：“ZXZXZXZX”
},
{
xtype:'displayfield'，
字段标签：“字段4”，
值：“AKHAKSHASH”
}
]
},
//第2排
{
xtype:'容器'，
布局：“hbox”，
默认值：{labelWidth:120，align:'stretch'，labelStyle:'font-weight:bold；font-size:11px'，flex:1，
fieldStyle:'字体大小：11px'
},
项目：[
{
xtype:'displayfield'，
字段标签：“字段5”，
值：“XXXXXXXXXXXXXXXXAAAAA XXX”，
宽度：“10px”
},
{
xtype:'displayfield'，
字段标签：“字段6”，
值：“AB”
},
{
xtype:'displayfield'，
字段标签：“字段7”，
价值：“ABC”
},
{
xtype:'displayfield'，
字段标签：“字段8”，
价值：“ABC”
}
]
}
]
});

您为每个元素提供了flex:1（通过在默认情况下使用它）。与此相反，您应该更愿意为其中一个元素提供flex:1，并为其他元素提供固定宽度（或minWidth maxWidth）

将flex:1赋予每个元素会尝试将总宽度平均分配给所有元素，如果可用宽度不够，则会发生重叠

因此，要删除重叠，请从默认值中去掉flex:1，并将flex:1指定给任何一个元素，并将宽度指定给其他元素

希望这有帮助

var genInfoFieldSet = new Ext.form.FieldSet({
        title: '<b>TEST FIELD SET</b>',
        height: '100%',
    autoWidth: true,
    items: [
    //ROW 1
        {
        xtype: 'container',
        layout: 'hbox',
        defaults: { labelWidth: 120, align: 'stretch', labelStyle: 'font-weight:bold;font-size:11px', flex: 1,
            fieldStyle: 'font-size:11px'
        },
        items: [
                {
                    xtype: 'displayfield',
                    fieldLabel: 'field 1',
                    value: 'ABCDESDAVBABVA'
                },
                {
                    xtype: 'displayfield',
                    fieldLabel: 'field 2',
                    value: 'ZXCVZXVCZXZX'
                },
                {
                    xtype: 'displayfield',
                    fieldLabel: 'field 3',
                    value: 'ZXZXZXZX'
                },
                {
                    xtype: 'displayfield',
                    fieldLabel: 'field 4',
                    value: 'AKHAKSHASH'
                }
            ]
    },
    //ROW 2
        {
        xtype: 'container',
        layout: 'hbox',
        defaults: { labelWidth: 120, align: 'stretch', labelStyle: 'font-weight:bold;font-size:11px', flex: 1,
            fieldStyle: 'font-size:11px'
        },
        items: [
                {
                    xtype: 'displayfield',
                    fieldLabel: 'field 5',
                    value: 'xxxxxxxxxxxxxxxxxxAAAAAAAXXX',
                    width: '10px'
                },
                {
                    xtype: 'displayfield',
                    fieldLabel: 'field 6',
                    value:  'AB'
                },
                {
                    xtype: 'displayfield',
                    fieldLabel: 'field 7',
                    value: 'ABC'
                },
                {
                    xtype: 'displayfield',
                    fieldLabel: 'field 8',
                    value: 'ABC'
                }
            ]
    }
    ]
});