Javascript Sencha Touch 2布局：适合内部内容

我有一个容器，它有一系列垂直排列的组件。这些组件的内部项目不会显示，除非我指定了链上某个位置的高度

为了使子组件拉伸以适合其内容，容器上应该使用什么布局

我尝试了以下方法，它们的效果与预期一致：

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

        }

})

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

---

我真的很感激你能给我指点，把它变成时间的水槽

所以有几个问题：

我没有在Dataview中正确设置存储，这意味着数据没有正确加载。因此，我现在使用DataView中的Ext.create创建存储

DataView的

scrollbale

需要为

null

而不是

false

容器（对于me ContentPanel）布局设置为

fit

。如果我想要多个面板的话，这会在以后引起问题，但是在花了这么长时间把它放到这个阶段之后，当我到达这个阶段时，我会跨越这座桥