javascript - Sencha Touch 2布局: Fit inner content

Question

我有一个容器，其中有一系列垂直组织的组件。这些组件具有内部项目，除非我指定链上某处的高度，否则不会显示这些项目。

容器上应该使用什么布局才能让子组件拉伸(stretch)以适合其内容？

我已经尝试了以下方法，它们的行为符合预期:

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

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

vbox - Flex 会导致组件共享屏幕，但不基于其内容，这不好，因为会为没有大量内容的内部组件留下空白，并且不会拉伸(stretch)这些组件较大的会溢出容器以进行滚动

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

问题:

目标(手动设置屏幕截图的高度):

主容器的设置如下:

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. 我没有在数据 View 中正确设置商店，这意味着数据未正确加载。因此，我现在在 DataView 初始化中使用 Ext.create 创建商店。
2. DataView 的 scrollbale 需要为 null 而不是 false。
3. 容器(对于我来说是ContentPanel)布局设置为fit。如果我想在那里放置多个面板，这会在以后引起问题，但在花了这么长时间到达这个阶段之后，当我到达它时我会跨过那座桥。