Sencha touch 如何让旋转木马占据它所需要的空间？

我不太清楚如何在容器内的其他两个项目之间有一个旋转木马，旋转木马没有设定的高度，而是根据活动项目内容的大小占用所需的空间。示例代码：

Ext.define('MyApp.view.MyContainer', {
    extend: 'Ext.Container',

    config: {
        items: [
            {
                xtype: 'container',
                items: [
                    {
                        xtype: 'label',
                        html: 'abc'
                    }
                ]
            },
            {
                xtype: 'carousel',
                items: [
                    {
                        xtype: 'container',
                        items: [
                            {
                                xtype: 'label',
                                html: 'just need space for one line'
                            }
                        ]
                    },
                    {
                        xtype: 'container',
                        items: [
                            {
                                xtype: 'label',
                                html: 'need<br/>space<br/>for<br/>more<br/>lines'
                            }
                        ]
                    }
                ]
            },
            {
                xtype: 'container',
                items: [
                    {
                        xtype: 'label',
                        html: 'def'
                    }
                ]
            }
        ]
    }

});

Ext.define（'MyApp.view.MyContainer'{
扩展：“Ext.Container”，
配置：{
项目：[
{
xtype:'容器'，
项目：[
{
xtype:'标签'，
html:“abc”
}
]
},
{
xtype:'旋转木马'，
项目：[
{
xtype:'容器'，
项目：[
{
xtype:'标签'，
html:“只需要一行的空间”
}
]
},
{
xtype:'容器'，
项目：[
{
xtype:'标签'，
html:“需要
空间
以获得更多的
行”
}
]
}
]
},
{
xtype:'容器'，
项目：[
{
xtype:'标签'，
html:'def'
}
]
}
]
}
});

---

对我来说，如果不指定高度，它就不会倒塌（根本不占用任何空间）。使用Sencha Touch 2.

嘿@TragedyStruck首先，您必须了解您的屏幕显示web应用程序的位置。好了，我们开始吧，我做了你的代码版本。组件

Ext.Viewport.getSize（）.height

为元素留出必要的空间。这适用于非全屏的元素，如果您想要全屏元素，那么您需要以编程方式生成

函数

Ext.define('myapp.view.MyContainer', {
   extend: 'Ext.Container',
   xtype: 'mycontainer1',

   config: {
      scrollable: true,
      items: [
        {
            xtype: 'container',
            items: [
                {
                    xtype: 'label',
                    html: 'abc'
                }
            ]
        },
        {
            xtype: 'carousel',
            style: 'background-color: red',
            height: Ext.Viewport.getSize().height,
            renderTo: document.body,
            items: [
                {
                    xtype: 'container',
                    items: [
                        {
                            xtype: 'label',
                            html: 'just need space for one line'
                        }
                    ]
                },
                {
                    xtype: 'container',
                    items: [
                        {
                            xtype: 'label',
                            html: 'need<br/>space<br/>for<br/>more<br/>lines'
                        }
                    ]
                }
            ]
        },
        {
            xtype: 'container',
            items: [
                {
                    xtype: 'label',
                    html: 'def'
                }
            ]
        },
        {
            xtype: 'container',
            items: [
                {
                    xtype: 'label',
                    html: 'ghi'
                }
            ]
        }

     ]
  }
});

Ext.define（'myapp.view.MyContainer'{
扩展：“Ext.Container”，
xtype:‘mycontainer1’，
配置：{
可滚动：对，
项目：[
{
xtype:'容器'，
项目：[
{
xtype:'标签'，
html:“abc”
}
]
},
{
xtype:'旋转木马'，
样式：“背景色：红色”，
高度：Ext.Viewport.getSize（）.height，
renderTo:document.body，
项目：[
{
xtype:'容器'，
项目：[
{
xtype:'标签'，
html:“只需要一行的空间”
}
]
},
{
xtype:'容器'，
项目：[
{
xtype:'标签'，
html:“需要
空间
以获得更多的
行”
}
]
}
]
},
{
xtype:'容器'，
项目：[
{
xtype:'标签'，
html:'def'
}
]
},
{
xtype:'容器'，
项目：[
{
xtype:'标签'，
html:“ghi”
}
]
}
]
}
});

我希望这有帮助。：）

---

您需要为容器设置布局。你可以找到一个

基本上，您可以在配置中添加以下内容：

layout:'vbox',

VBox布局将项目水平放置在容器中

然后，在旋转木马中，只需添加：

flex:1

告诉它尽可能多地占用空间

---

希望这有帮助

我接受这一点，因为它回答了我所写的问题，尽管最初的目的是根据卡片内容改变转盘高度。