Question

为什么这么难？我有一个容器，布局：'hbox'，以及一系列按钮。问题是按钮继续超出容器的右边界。将内容包装在容器内的最佳实践方法是什么？我应该漂浮：“离开”我的孩子的物品？我可以在任何地方使用固定宽度，我的网站不会水平调整大小。

Answer 1

在这里做正在寻找的事情的正确方法是使用layout:'column'，它会像浮动的div一样对待它的孩子。

Answer 2

如果您希望内容溢出到下一个“行”，则

hbox布局不是正确的布局。 Hbox在一行中跨固定宽度对齐和分发组件。最好坚持使用'auto'布局（这是默认设置）并允许浏览器通过CSS float控制溢出（就像你提到的那样）。

或者，您可以使用Ext.toolbar.Toolbar#enableOverflow - 请参阅docs

配置为true以使工具栏提供一个按钮，激活下拉菜单以显示溢出工具栏宽度的项目。

Answer 3

如果有帮助；我默认将layout保留为auto，并使用其他CSS在wrap的使用范围内实现了responsive的方法；

一些嵌套子容器正在动态呈现到foocontainer中。因此，在CSS中完全具有响应式UI。

.foocontainer > div[data-ref="outerCt"] > div[data-ref="innerCt"] {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex!important;
  flex-wrap: wrap!important;
}

Extjs动态包装容器中的项目

3 个答案: