Что подразумевается под свойством 'flex' любого макета ExtJS4?

Question

Я видел примеры, где какое-то число указывается в отношении flex, например, скажем

{text: 'Actual', xtype : 'gridcolumn', dataIndex: 'some_data', flex: 1}

Что передается этим свойством?Указанную документацию немного сложно понять, поэтому более простое объяснение очень поможет!

Answer 1

Чтобы не использовать описание документации, которое, как вы сказали, вы нашли немного хитрым:

Flex используется как свойство в макетах hbox и vbox и указывает объем пространства, которое этот компонент займет в родительском контейнере.

Вы можете использовать любое число больше нуля в качестве значения свойства flex - некоторые люди предпочитают использовать целые числа для простоты, другие, которые я видел, используют значения, такие как 0,25, для более простого представления процентов.

Базовый пример гибкого действия:

var myPanel = Ext.create('Ext.panel.Panel', {
    width: 100,
    height: 100,
    layout: {
        type: 'hbox',
        align: 'stretch' // Stretches child items to the height of this panel.
    },
    items: [{
        xtype: 'container',
        html: 'Container one!',
        flex: 5 // This takes up 50% of the container.
    }, {
        xtype: 'container',
        html: 'Container two!',
        flex: 3 // This takes up 30% of the container.
    }, {
        xtype: 'container',
        html: 'Container three!',
        flex: 2 // This takes up 20% of the container.
    }]
});

Ключевым моментом здесь является знание того, что не значение каждого флекса определяет макет, а то, как все эти значения связаны друг с другом. Если бы я добавил в этот макет еще один контейнер с изгибом 10, это заняло бы половину макета, поскольку 10 - это половина от 10 + 5 + 3 + 2 = 20.

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

Answer 2

Давайте рассмотрим пример для этого, если есть родительский контейнер, имеющий ширину 100 и имеющий три дочерних элемента со следующими конфигами:

1st Element - width:70
2nd Element - flex:2
3rd Element - flex:1

Итак, теперь двигатель сначала выделит 70 первому элементу. И тогда он разделит оставшуюся доступную ширину в соотношении 2: 1 и выделит 20 для второго и 10 для третьего элемента.

Таким образом, flex - это способ указания относительной ширины дочерних элементов. Кроме того, просто добавьте, что интенсивное использование flex может создать проблему в макетах флюидов, учитывая тот факт, что flex обычно влияет на оставшуюся доступную ширину, которая может быть даже 0, если общая ширина контейнера уменьшается, и это может привести к перекрытию полей. Пример здесь.

Answer 3

Используется в макетах VBox и HBox:

Этот параметр конфигурации должен применяться к дочерним элементам Контейнер управляется этим макетом. Каждый дочерний элемент со свойством flex будет сгибаться горизонтально в соответствии с относительным изгибом каждого элемента значение сравнивается с суммой всех элементов с указанным значением flex. Любые дочерние элементы, которые имеют flex = 0 или flex = undefined, будут не сгибаться (исходный размер не изменится).

См. http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.HBox и т. Д.