Что означает свойство "flex" любого макета ExtJS4?

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

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

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

9
extjs4 javascript

3 ответов

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

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

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

базовый пример flex в действии:

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.
    }]
});

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

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

15

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

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

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

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

3

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

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

см.http://docs.sencha.com/ext-js/4-0/#!/api / Ext.макет.контейнер.HBox etc.

0