Sencha Touch 2 layout: Fit inner content

Question

I've got a container that has a series of components organized vertically. These components have inner items that are not shown unless I specify the height somewhere up the chain.

What layout should be used on the container in order to have the child components stretch to fit their content?

I've tried the following and they act as expected:

fit - stretches the first component beyond what is required to fit the whole screen.

vbox - without flex results in only the inner components docked panel being shown, with the content panel having no height

vbox - with flex results in the components sharing the screen but not based on their contents, this is no good as leaves white space for inner components without a lot of content and doesn't stretch those larger ones to overflow the container for scrolling

I thought the default layout was the one to use for this but this results in the inner components only showing the docked panel, hiding the rest:

The problem:

Default layout or vbox without flex

The goal (heights set manually for the screenshot):

Manually set heights

The main container is set up like this:

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

})

The inner components are set up like this:

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

        }

})

Which extends (eventually, intermediate classes only have fields no layout configuration):

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);
    }

});

Would really appreciate any pointers with this, turning into quite the time sink!

Autonomy Autonomy · Accepted Answer · 2014-10-16T15:07:34

So turns out there was a few issues:

I didn't have my store set up correctly in my Dataview, which meant the data wasn't being loaded properly. So I now create the store using Ext.create in the DataView initialize.
DataView's scrollbale needs to be null instead of false.
Container (for me ContentPanel) layout set to fit. This is going to cause problems later if I want multiple panels in there though, but after spending so long getting it to this stage I'll cross that bridge when I come to it.

Sencha Touch 2 layout: Fit inner content

1 Answers