Sencha Touch 2布局：适合内在内容

Question

我有一个容器，它有一系列垂直组织的组件。这些组件具有未显示的内部项目，除非我在链的某处指定高度。

为了让子组件伸展以适应其内容，应该在容器上使用什么布局？

我尝试了以下内容，并按预期行事：

fit - 将第一个组件拉伸到超出整个屏幕所需的范围。

vbox - 没有flex会导致仅显示内部组件停靠面板，内容面板没有高度

vbox - 使用flex导致组件共享屏幕但不基于其内容，这不好，因为内部组件留下了没有大量内容的空白空间，并且没有将那些较大的内容扩展到溢出容器滚动

我认为默认布局是用于此的布局，但这导致内部组件仅显示停靠面板，隐藏其余部分：

问题：

目标（为屏幕截图手动设置高度）：

主容器的设置如下：

Ext.define('Messenger.view.NewsFeed',
{
    extend : 'Ext.Container',
    xtype : 'NewsFeed',
    config :
        {
            scrollable :
                {
                    direction : 'vertical',
                    directionLock : true
                },
            items : [
                    {
                        xtype : 'RacecardDaily'
                    },
                    {
                        xtype : 'RacecardDaily'
                    },
                    {
                        xtype : 'RacecardDaily'
                    },
                    {
                        xtype : 'RacecardDaily'
                    }
            ]
        }

})

内部组件设置如下：

Ext.define('Messenger.view.content.actionable.racecard.daily.Daily',
{
    extend : 'Messenger.view.content.actionable.racecard.Racecard',
    xtype : 'RacecardDaily',
    requires : [
        'Messenger.view.content.actionable.racecard.daily.DataView'
    ],

    config :
        {
            title : 'Today\'s racing',
            cls: 'racecard-daily',
            panelItems : [
                    {
                        xtype : 'RacecardDailyDataView',
                        flex : 1,
                        data : [ ... ] // Not relevant, just populates panel with content
                    }
            ]

        }

})

扩展（最终，中间类只有字段没有布局配置）：

Ext.define('Messenger.view.content.Container',
{
    extend : 'Ext.Container',
    requires : [
            'Messenger.view.content.Header', 'Messenger.view.content.Panel'
    ],

    config :
        {
            baseCls : 'content-container',
            title : '',
            panelItems : [],
            margin : '10px 5% 0 5%',
            layout: 'vbox'
        },

    initialize : function() {
        this.contentHeader = this.add(
            {
                xtype : 'ContentHeader',
                title : this.getTitle()
            });
        this.contentPanel = this.add(
            {
                xtype : 'ContentPanel',
                items : this.getPanelItems(),
                flex: 1
            });
        this.callParent();
    },

    canHide : function() {
        return true;
    },

    toggleMinimize : function() {
      var shouldHide = !this.contentPanel.getHidden();
      this.contentPanel.setHidden(shouldHide);
    }

});

真的很感激任何与此有关的指针，变成了时间下沉！

Answer 1

事实证明存在一些问题：

1. 我没有在我的Dataview中正确设置我的商店，这意味着数据没有正确加载。所以我现在在DataView初始化中使用Ext.create创建商店。
2. DataView的scrollbale需要null而不是false。
3. Container（对我来说，ContentPanel）布局设置为fit。如果我想在那里使用多个面板，这会在以后引起问题，但是在花了这么长时间才进入这个阶段后，当我来到它时，我将穿过那座桥。