Extjs fields overlap when using HBox layout

问题

I am having trouble making ExtJS field set elements appear correctly without overlapping. I use a FieldSet class and each row is a hbox container. My goal is to leave the layout the same but somehow make the values automatically show up on more than one line if needed.

Below is a sample of what my code looks like and a screenshot.

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'
                }
            ]
    }
    ]
});

回答1:

You have provided flex:1 to every element (by using it in defaults). Instead of this, you should prefer providing flex:1 to one of the element, and give fixed width (or minWidth maxWidth) to others.

Giving flex:1 to every element tries to distribute the total width equally to all the elements and if the available width is not enough then the overlap occurs.

Thus, to remove the overlap, take off flex:1 from the defaults and assign flex:1 to any one element and give widths to others.

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Box-cfg-flex

Hope this helps.

来源：https://stackoverflow.com/questions/7957984/extjs-fields-overlap-when-using-hbox-layout