sencha-touch - 如何让 Carousel 占据它需要的空间？

Question

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

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'
                    }
                ]
            }
        ]
    }

});

对我来说，如果没有指定高度，它只会崩溃（根本不占用任何空间）。使用煎茶触控 2。

Answer 1

嘿@TragedyStruck 首先，您已经了解了显示 Web 应用程序的屏幕。好的，我们开始吧，我做了你的代码版本。该组件Ext.Viewport.getSize().height为您的元素占用必要的空间。如果您想要全屏元素，这适用于非全屏元素，因此您需要以编程方式制作function.

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'
                }
            ]
        }

     ]
  }
});

我希望这有帮助。:)

Answer 2

您需要为容器设置布局。您可以在此处找到布局介绍

基本上，您将其添加到您的配置中：

layout:'vbox',

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

然后，在您的轮播中，只需添加：

flex:1

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

这里的例子

希望这可以帮助