Sencha touch panel not showing

Question

I'm trying to display a simple html and not show it on screen.

This is my code:

nextView = {
    xtype: 'panel',
    layout: {
        type: 'vbox',
        pack: 'center'
    },
    style: 'background-color:#FFFFFF',
    scrollable: 'vertical',
    items: [
       {
            docked: 'top',
            xtype: 'globaltoolbar',
            height: 55
         },
        {
            xtype: 'normaltoolbar',
            items: [
                {
                    xtype: 'backbutton',
                }
            ],
            title: 'Title'
        },
        {
            xtype: 'panel',
            styleHtmlContent: true,
            scrollable: 'vertical',
            html: 'This is the html of this panel.',
            flex: 1
        }
    ]
};

I am showing the upper bar and the title, but the html section is blank. IOS and Android shows well, but in Windows Phone 8 not.

enter image description here

Any ideas?, thanks

shepsii shepsii · Accepted Answer · 2014-06-18T14:21:57

You have set the whole view to have a layout of type vbox. This will not stretch any inner content, instead expecting to have to deal with multiple items, each of which may have different height (in which case they would need to be displayed one immediately below the other).

So basically, your whole view is telling all your inner items to only take up the height they need.

Your inner panel (by the way, this one should be a component, not a panel. If you want to put other stuff inside it, it should be a component) is scrollable vertically. Therefore unless its container forces it to have a minimum height, or you have a minimum height set on this inner panel itself, it will default to zero.

There's two ways you could sort this. 1. Take scrollable: 'vertical' off the inner panel. 2. Set the layout of the whole view to be "fit" which will stretch the first non-docked item (ie, the one with HTML) to be the full size of the view (apart from the docked items).

Sencha touch panel not showing

1 Answers