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

});

对我来说，如果没有指定高度，它就会崩溃成任何东西（根本不占用任何空间）。使用Sencha Touch 2。

Answer 1

嘿@TragedyStruck首先你了解你的屏幕你在哪里显示你的网络应用程序。好的，我们去了，我做了你的代码版本。组件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

您需要为容器设置布局。您可以找到intro to layouts here

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

layout:'vbox',

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

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

flex:1

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

Example here

希望这有帮助

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

2 个答案: