Extjs 6 responsiveConfig 找不到布局配置项的设置器

Question

我有 a fiddle of a base layout I'm trying to add responsive configurations to。

我的目标是使用边框布局，其中导航可以根据 window 大小在西部地区和北部地区之间切换，并且布局配置可以在垂直和水平之间切换，以便当区域向西时，按钮垂直分组，当区域向北时，按钮水平分组。

我知道默认情况下，布局类型不能在运行时更改，但我发现 this forum thread 用户指出，如果您使用 box 布局类型（vbox 的父级）和 hbox），您可以更新 vertical 配置以在运行时更改分组。

我在上面链接的 fiddle 是我尝试对这个概念进行原型设计。

我运行遇到的问题是 responsiveConfig 无法找到我要更改的特定属性的设置器，它不仅适用于垂直配置。我知道有 setter 并且我之前在响应式配置中看到的配置项也不能正常工作：

Ext.layout.container.Box肯定有setPack方法。

我是不是配置有误？

Answer 1

错误是抱怨 auto 布局没有 pack 的 setter。这告诉我布局确实是在运行时根据响应布局配置中指定的值设置的。由于定义了 none，只有 vertical 和 pack 配置，布局类型被解释为 auto。 fiddle 中的小改动，定义布局类型如下：

responsiveConfig:{
    wide:{
        layout:{
            type : 'vbox',
            pack:'start'
        },
        bodyStyle:{'background-color': 'orange'}
    },
    tall:{
        layout:{
            type : 'hbox',
            pack: 'center'
        },
        bodyStyle:{'background-color': 'purple'}
    }
},

你的错误消失了。

Answer 2

目前不支持在运行时更改布局。这里有一个功能请求： https://www.sencha.com/forum/showthread.php?294082

Fiddle 解决方法： https://fiddle.sencha.com/#fiddle/dqj

Answer 3

我 post 访问了 sencha 论坛中的主题，其中描述了我正在尝试的技术。回答问题的 post 人最初回答了我的 post，更新后的 fiddle 显示了正确的实现。

我添加了the responsive box implementation as well as the region switching into my fiddle。

这是所需的响应部分：

plugins: 'responsive',
responsiveConfig:{
    wide:{
        layout:{
            type: 'box',
            vertical: true,
            pack:'start'
        },
        region: 'west'
    },
    tall:{
        layout:{
            type: 'box',
            vertical: false,
            pack: 'center'
        },
        region: 'north'
    }

我认为这里要了解的重要部分（以及让我感到困惑的部分）是您必须在 layout 配置中包含 type: 'box' responsiveConfig 属性因为 responsiveConfig 没有触发每个单独的 setter 布局（type、vertical 和 pack），它 触发整体 layoutsetter方法。如果您不在提供布局配置的对象中包含 type 配置，它将使用 默认类型 ，即 'auto'。

这就是为什么我在原始 post 的屏幕截图中包含 javascript 控制台中的错误消息，其中指的是 Ext.layout.container.Auto 而不是 Ext.layout.container.Box。错误消息是正确的，Ext.layout.container.Auto 没有 setPack 方法。

Extjs 6 responsiveConfig 找不到布局配置项的设置器

Extjs 6 responsiveConfig cannot find setters for layout config items

extjs

responsive-design

extjs5

extjs6

extjs6-classic