如何在hbox佈局中拉伸單個元素？

如何區分hbox佈局中的extjs4只展開一個元素？如何在hbox佈局中拉伸單個元素？

例如我有以下佈局：

{ 
    flex: 1, 
    layout: { 
     type: 'vbox', 
     align: 'stretch' 
    }, 
    items: [{ 
     flex: 1, 
     // GRID, needs to be stretched 
    }, { 
     // button, don't stretch 
    }, { 
     // another button, don't stretch 
    }] 
}

在上面的代碼我的所有元素（包括按鈕）被拉伸。盒子佈局有可能嗎？

當然，我可以將按鈕包裝在hbox容器中，但我不喜歡這種解決方案。

來源

2013-04-17 Sergey Stolyarov

目前沒有辦法在每個項目的基礎上指定對齊配置。 –

好吧，還有其他方法可以將一個元素拉伸到最大寬度嗎？ 'anchor'在這裏不起作用，因爲我不想使用數字負偏移量。 –

您可以使用的一種解決方法是給按鈕maxHeight，因爲約束總是「贏」。

Ext.onReady(function(){ 
    Ext.create('Ext.panel.Panel', { 
     width: 400, 
     height: 300, 
     renderTo: document.body, 
     layout: { 
      type: 'hbox', 
      align: 'stretch' 
     }, 
     items: [{ 
      flex: 1, 
      title: 'A panel' 
     }, { 
      xtype: 'button', 
      text: 'B1', 
      maxHeight: 25 
     }, { 
      xtype: 'button', 
      text: 'B2', 
      maxHeight: 25 
     }] 
    }) 
});

來源

2013-04-17 11:44:13

我非常抱歉，我的意思是vbox，而不是hbox。垂直排列的項目，頂部有一個完全允許的寬度（即拉伸）和接下來的兩個 - 只有需要的寬度（白色空間在右邊）。並且網格也應該垂直最大化（這是通過網格定義中的'flex：1'完成的）。 –

同樣的事情適用，如果你用'maxWidth'配置它們。否則，正如你所說，你可以將它們包裝在一個容器中並讓它們自動調整大小。 –

不幸的是，我不知道按鈕的大小，不幸的是，它們是本地化的，所以寬度不固定。所以我認爲包裝是唯一的工作方式。 –

如何在hbox佈局中拉伸單個元素？

回答

相關問題