Блог

Главная - Вопросы по программированию - свойство подгонки макета extjs как называется это свойство при написании макета в качестве объекта

свойство подгонки макета extjs как называется это свойство при написании макета в качестве объекта

#layout #extjs

Вопрос:

 layout:{
        type:'vbox',
        align:'center',
        
    }

Этот код я использую,
Теперь я хочу добавить и эту функциональность

 layout:'fit'

Но я не получаю никакого синтаксиса для этого,
Я имею в виду, как называется свойство fit при написании макета в качестве объекта.
Я использую ExtJS 6.0.2

Комментарии:

1. Или есть какой-либо другой способ сделать это без использования свойства макета

2. Что именно вы пытаетесь сделать? Оба синтаксиса должны работать, разница в том, что макет как объект предоставляет вам больше параметров конфигурации, в то время как макет как строка применяет конфигурации по умолчанию.

3. @PeterKoltai Я хочу, чтобы элементы соответствовали ширине родительского контейнера, я также хочу, чтобы они выровнялись по центру и были расположены по вертикали. Поэтому я хочу все эти функции.

Ответ №1:

Вы можете, например, добавить несколько контейнеров с center макетом в родительский контейнер, это будет сделано так, как вы хотите: по горизонтали по центру, отображается вертикально, и каждый дочерний контейнер будет иметь ширину родительского контейнера. Смотрите код ниже, я добавил цвет, чтобы вы могли видеть ширину контейнеров:

 Ext.create({
    renderTo: Ext.getBody(),
    xtype: 'container',
    items: [{
            xtype: 'container',
            layout: 'center',
            style: {
                background: 'lightBlue'
            },
            items: [{
                xtype: 'component',
                html: '1. Lorem ipsum dolor sit amet',
            }]
        }, {
            xtype: 'container',
            layout: 'center',
            items: [{
                xtype: 'component',
                html: '2. Lorem ipsum dolor sit amet',
            }],
            style: {
                background: 'lightBlue'
            },
        }, {
            xtype: 'container',
            layout: 'center',
            items: [{
                xtype: 'component',
                html: '3. Lorem ipsum dolor sit amet',
            }],
            style: {
                background: 'lightBlue'
            },
        }]
});

Ответ №2:

Что вам нужно, так это:

 layout: {
   type: 'fit' 
}

Даже если вы предоставите его в виде строковой конфигурации, после применения контейнер setLayout преобразует его в объект.

     // https://docs.sencha.com/extjs/6.0.2/classic/src/Container.js-3.html#Ext.container.Container-method-setLayout    
    
    setLayout: function(layout) {
        ///...
        if (typeof layout === 'string') {
            layout = {
                type: layout
            };
        }
        ///...
    }
Метки: