javascript - 任何 ExtJS4 布局的 'flex' 属性是什么意思？

Question

我见过一些例子，其中一些数字是针对 flex 指定的，比如

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

这个属性传达了什么？指定的文档有点难以理解，所以更简单的解释会很有帮助!

Answer 1

为了避免使用文档描述，您说您发现它有点棘手:

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 的一半。

希望对您有所帮助!