sencha touch 2 list 100% height

Question

2 panels:

Ext.create('Ext.Container', {
    fullscreen: true,
    layout: 'hbox',
    items: [
        {
            xtype: 'panel',
            html: 'message list',
            flex: 1,
            items: [
                {
                    xtype: 'list',
                    itemTpl: '{title}',
                    data: [
                        { title: 'Item 1' },
                        { title: 'Item 2' },
                        { title: 'Item 3' },
                        { title: 'Item 4' }
                    ]
                }
            ]
        },
        {
            xtype: 'panel',
            html: 'message preview',
            flex: 3
        }
    ]
});

There is no height attribute specified in first panels list object, so it is not available for display. How can i set 100% height in xtype: 'list' ?

Answer 1

You need to give the lists container a layout so it knows to stretch its children (the list).

layout: 'fit'

Using fit will tell your panel to make all children (only the list in your case) to stretch to the size of your panel.

Example of this on Sencha Fiddle.

And here is a great guide on all the available layouts in Sencha Touch 2.0.