3

我正在尝试将响应式配置添加到.

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

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

我上面链接的小提琴是我尝试将这个概念原型化。

我遇到的问题是 responsiveConfig 无法找到我要更改的特定属性的设置器，而不仅仅是垂直配置。我知道有设置器的配置项，并且我之前在 responsiveConfig 中看到过的工作也不能正常工作：

在此处输入图像描述

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

我是否以某种方式错误配置？

4

3 回答 3

4

我在 sencha 的论坛上发布了帖子，其中描述了我正在尝试的技术。回答问题的发帖人最初用更新的小提琴回答了我的帖子，显示了正确的实现。

我已经添加了响应框实现以及切换到我的 fiddle 的区域。

这是所需的响应部分：

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

我认为这里要知道的重要部分（以及让我绊倒的事情）是您必须在属性type: 'box'的layout配置中包含设置方法。如果你没有在你提供布局配置的对象中包含配置，它使用默认类型，即“自动”。responsiveConfigtypeverticalpacklayouttype

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

于 2015-07-23T00:10:30.237 回答
1

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

摆弄一种解决方法： https ://fiddle.sencha.com/#fiddle/dqj

于 2015-07-22T19:41:13.970 回答
0

该错误是抱怨auto布局没有设置器pack。这告诉我布局确实是在运行时根据响应式布局配置中指定的值设置的。由于没有定义，只有verticaland pack，配置，布局类型被解释为auto. 小提琴中的小改动，定义布局类型如下：

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

你的错误消失了。

于 2015-07-22T19:30:11.423 回答