使用HBox布局时，Extjs字段重叠 [英] Extjs fields overlap when using HBox layout

问题描述

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

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.

屏幕截图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'
                }
            ]
    }
    ]
});

推荐答案

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

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.

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

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.

因此，要删除重叠，请将flex ：1从默认值，并将flex：1分配给任何一个元素，并给予其他宽度。

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

希望这有帮助。

这篇关于使用HBox布局时，Extjs字段重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！