我见过一些例子,其中一些数字是针对 flex 指定的,比如
{text: 'Actual', xtype : 'gridcolumn', dataIndex: 'some_data', flex: 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 的一半。
希望对您有所帮助!
关于javascript - 任何 ExtJS4 布局的 'flex' 属性是什么意思?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8241682/