ExtJS - Выравнивание элементов формы в макете столбца FormPanel - PullRequest
Новая
       21

ExtJS - Выравнивание элементов формы в макете столбца FormPanel

11 голосов
/ 13 июня 2011

У меня есть FormPanel с 3 столбцами. Каждый столбец составляет 33% ширины FormPanel. Выглядит примерно так: 

searchForm = new Ext.FormPanel({
    frame: true,
    title: 'Search Criteria',
    labelAlign: 'left',
    labelStyle: 'font-weight:bold;',
    labelWidth: 85,
    width: 900,
    items: [{
        layout: 'column',
        items: [{ // column #1
            columnWidth: .33,
            layout: 'form',
            items: [{
                xtype: 'textfield',
                fieldLabel: 'Banner ID',
                name: 'bannerID',
                anchor: '95%',
            },
            new Ext.form.ComboBox({
                fieldLabel: 'Advertiser',
                typeAhead: true,
                triggerAction: 'all',
                mode: 'local',
                emptyText: 'Advertiser',
                store: advertiserList,
                valueField: 'id',
                displayField: 'name'
            })] // close items for first column
        }, {
            columnWidth: .33,
            layout: 'form',
            items: [{
                xtype: 'textfield',
                fieldLabel: 'Banner Name',
                name: 'bannerName',
                anchor: '95%',
            },
            new Ext.form.ComboBox({
                fieldLabel: 'Art Type',
                typeAhead: true,
                triggerAction: 'all',
                mode: 'local',
                emptyText: 'Art Type',
                store: artTypesList,
                valueField: 'id',
                displayField: 'name'
            })] // close items for second column
        }, {
            columnWidth: .33,
            layout: 'form',
            items: [{
                xtype: 'hidden'
            },
            new Ext.form.ComboBox({
                fieldLabel: 'Art Size',
                typeAhead: true,
                triggerAction: 'all',
                mode: 'local',
                emptyText: 'Art Size',
                store: artSizeList,
                valueField: 'id',
                displayField: 'name'
            })] // close items for third column
        }]
    }]
}); // close searchForm FormPanel

Было отображено что-то похожее на это: Screenshot

Единственная проблема в том, что я хочу, чтобы поле / размер "Art Size" было выровнено в той же строке, что и поля "Рекламодатель" и "Art Type". Есть ли способ добавить «пустой» элемент, чтобы он приводил запись вниз к правильной строке? Есть ли другой подход к этому, который я пропускаю?

Спасибо!

EDIT: Это сработало: 

{
    xtype: 'component',
    fieldLabel: ' ',
    labelSeparator: ' ',  
}

Ответы [ 4 ]

8 голосов
/ 06 ноября 2012

по умолчанию пустые метки скрыты (поле сдвигается влево). вместо того, чтобы ставить '& nbsp;' ярлык ... 

fieldLabel: ' ',
labelSeparator: ' ',

вы можете сделать это правильно: 

hideEmptyLabel : false

Ведьма выровняет ваш поданный компонент, даже если метка не указана.

7 голосов
/ 23 июня 2011

РЕДАКТИРОВАТЬ: Это сработало: 

           {
                xtype: 'component',
                fieldLabel: ' ',
                labelSeparator: ' ',  
            }
3 голосов
/ 15 октября 2012

Ваше решение будет работать, но это не ExtJS (/ HTML таблицы).

Вы используете макет column, поэтому вы можете использовать colspan: 2 в поле имени баннера, что приводит к тому же выводу.
Вы также можете использовать rowspan, чтобы ваше поле занимало две строки:)

1 голос
/ 18 сентября 2014

Ничто из вышеперечисленного, похоже, не помогло мне.Мне пришлось явно установить высоту ячейки empy. 

xtype: 'label',
text: ' ',
flex:1,
height:22

Разочаровывает, мягко говоря.

Однако это работает только с макетом vBox .Если я использую якорь макет, то ничего не работает: (

...