Поля Extjs перекрываются при использовании макета HBox - PullRequest
Новая
       5

Поля Extjs перекрываются при использовании макета HBox

0 голосов
/ 31 октября 2011

У меня проблемы с отображением элементов набора полей ExtJS без наложения. Я использую класс FieldSet, и каждая строка является контейнером hbox. Моя цель - оставить макет таким же, но каким-то образом заставить значения автоматически отображаться более чем на одной строке, если это необходимо.

Ниже приведен пример того, как выглядит мой код, и снимок экрана.

Снимок экрана 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'
                }
            ]
    }
    ]
});

1 Ответ

1 голос
/ 01 ноября 2011

Вы указали 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

Надеюсь, это поможет.

...