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

标签 extjs responsive-design extjs5 extjs6 extjs6-classic

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

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

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

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

我遇到的问题是 responsiveConfig 无法找到我要更改的特定属性的 setter ,而且它不仅适用于垂直配置。我知道有 setter 的配置项,我之前在 responsiveConfig 中看到的工作效果不佳:

enter image description here

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

我是不是配置有误?

最佳答案

我在 sencha 论坛的主题中发帖,其中描述了我正在尝试的技术。回答问题的张贴者最初用更新的 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 (typeverticalpack) ,它触发整个布局 setter 方法。如果您不在提供布局配置的对象中包含 type 配置,它将使用 默认类型,即“auto”。

这就是为什么我在原始帖子的屏幕截图中包含了 javascript 控制台中的错误消息,其中引用了 Ext.layout.container.Auto 而不是 Ext.layout.container。框。错误信息是对的,Ext.layout.container.Auto没有 setPack 方法。

关于Extjs 6 responsiveConfig 找不到布局配置项的 setter ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31568984/

相关文章:

javascript - Extjs 4 - 关联 hasMany 不会在 loadData 上加载嵌套列表

ExtJS:如何在右键单击事件中获取所选网格记录的数据?

ExtJS 3 网格自动宽度

html - 菜单全宽。列表项共享等宽以获得全宽

javascript - Extjs superclass.constructor.call 用法

extjs - 以编程方式隐藏边框布局区域内的组件

css - 尽管在响应容器中,图像没有响应

android - Android 媒体查询

javascript - 如何在 Ext js 6 中全局覆盖 startParam 和 limitParam 名称

asp.net-web-api - 在 Visual Studio 中将 extjs 5 应用程序构建与 sencha cmd 和 WebAPI 集成