什麼意思是任何ExtJS4佈局的'flex'屬性？

我已經看到了其中對柔性指定一定數量的例子，好比說什麼意思是任何ExtJS4佈局的'flex'屬性？

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

什麼是該屬性傳達？指定的文檔有點難以理解，所以更簡單的解釋會大大幫助！

來源

2011-11-23 Unos

我同意！ ExtJS4 Documentaion非常糟糕...... –

爲了避免使用的文檔描述，你說你發現有些複雜：

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

這裏的關鍵是要知道，這不是一個定義佈局的每個柔性的價值，但是如何將這些值都相互關聯。如果我在此佈局中添加了另一個flex爲10的容器，則會佔用佈局的一半，因爲10是10 + 5 + 3 + 2 = 20的一半。

希望有所幫助！

來源

2011-11-23 13:19:44

它在垂直框中，然後HBox中佈局中使用：

此配置選項將被應用到容器通過此佈局管理的子項。具有柔性屬性的每個子項都將根據每個項目的相對彈性值值與指定爲彈性值的所有項目的總和進行水平彎曲。柔性= 0或柔性=未定義的任何子項目不會被「彎曲」（初始大小不會被更改）。

參見http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.HBox等

來源

2011-11-23 11:51:35 Lloyd

讓我們考慮一個例子用於此，如果有一個父容器具有寬度爲100，並具有以下CONFIGS三個子元素：

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

所以，現在，發動機將第一分配70到第一元件。然後它將以2：1的比例劃分剩餘的可用寬度，並將20分配給第二個元素，將第10個元素分配給第三個元素。

因此，flex是一種指定子元素之間相對寬度的方法。另外，僅僅爲了補充，大量使用flex可能會在流體佈局中產生問題，因爲flex通常會影響剩餘的可用寬度，如果整個容器寬度減小並且這可能會導致場重疊，則該寬度可能甚至爲0。 Example here.

來源

2011-11-23 14:19:33 netemp

因此，只有以比率的形式應用此屬性時，此屬性纔會真正有用...因此，必須至少有兩個具有flex的容器才能真正有用。假設我有一個網格，在整個視口上渲染，在每個列中都有一些相對彈性值。所以，當我改變瀏覽器窗口的大小時，列的寬度應該按照定義的比例改變，對吧？ – Unos

Flex也可以僅提供給其中一個子元素。如果僅提供給一個元素，那麼引擎將爲所有其他元素分配固定寬度（如其配置中所述），然後將剩餘寬度分配給具有flex的子元素爲1.是的，flex將確保如果父元素寬度發生變化，則根據flex值，子寬度也會發生變化。 – netemp

什麼意思是任何ExtJS4佈局的'flex'屬性？

回答

相關問題