extjs - Extjs 在容器中动态包装项目

Question

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

Answer 1

做我在这里寻找的正确方法是使用layout:'column'它将其孩子视为浮动div。

Answer 2

如果您希望内容溢出到下一个“行”，则 hbox 布局不是正确的布局。Hbox 在单行中以固定宽度对齐和分布组件。最好坚持使用“自动”布局（这是默认设置）并允许浏览器通过 CSS 浮动控制溢出（正如您所提到的）。

或者，您可以使用Ext.toolbar.Toolbar#enableOverflow- 查看文档

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

Answer 3

如果它会有所帮助；layout我默认保留asauto并使用额外的 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;
}