Question

我无法正确显示ExtJS字段集元素而不重叠。我使用FieldSet类，每行都是一个hbox容器。我的目标是保持布局相同，但不知何故，如果需要，值会自动显示在多行上。

下面是我的代码的样子和截图。

Screen shot http://img197.imageshack.us/img197/5741/hbox.gif

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

Answer 1

您为每个元素提供了flex：1（默认情况下使用它）。而不是这样，你应该更喜欢提供flex：1到一个元素，并给其他元素赋予固定宽度（或minWidth maxWidth）。

给予flex：1对每个元素尝试将总宽度均等地分配给所有元素，如果可用宽度不够，则发生重叠。

因此，要删除重叠，请从默认值中取出flex：1并将flex：1指定给任何一个元素，并为其他元素指定宽度。

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

希望这有帮助。

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

1 个答案: