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

Question

我已经看过一些例子,其中一些数字是针对flex指定的,比如说

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

这个房产传达了什么？指定的文档有点难以理解,因此更简单的解释将有很大帮助!

Answer 1

为了避免使用你说的文档描述,你发现有点棘手:

Flex在hbox和vbox布局中用作属性,并指示此组件在其父容器中占用的空间量.

您可以使用任何大于零的数字作为弹性属性值 - 有些人喜欢使用整数来简化,有些人我曾经看过使用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的值,而不是这些值如何相互关联.如果我将另一个灵活性为10的容器添加到此布局中,那将占用布局的一半,因为10是10 + 5 + 3 + 2 = 20的一半.

希望有所帮助!