在 ExtJS 6 应用程序中使用 responsiveConfig 更改布局

Question

我正在使用 ExtJS 6 呈现响应式布局，其中两个面板水平对齐。我想要实现的是：

如果 window 大小 >= 1200px，则两个面板都应使用 "hbox" 布局呈现，即面板 "A" 应呈现在面板 [= 的左侧29=]。每个面板的宽度应约为。 50%
如果 window 大小小于 1200 像素，则两个面板都应使用 "vbox" 呈现，即面板 "A" 应位于面板 "B" 上方。每个面板的宽度应为 100%

This fiddle 显示了我当前的实现。这里的问题是，如果 window 大小 < 1200px，每个面板的宽度坚持 50% 但应该是 100%。

感谢任何帮助！

Answer 1

您忘记像这样将插件添加到子项目中：

items: [
    {
        title: 'A',
        width: '50%',
        html: '<p>lorem ipsum</p>',
        plugins: 'responsive',
        responsiveConfig: {
          ...

您必须将插件添加到每个组件中，以获得响应配置。

在 ExtJS 6 应用程序中使用 responsiveConfig 更改布局

Alter layout using responsiveConfig within an ExtJS 6 app

extjs

responsive-design

extjs6