7

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' ?

fractious
  • 1,642
  • 16
  • 30
dima.h
  • 860
  • 2
  • 10
  • 14

1 Answers1

13

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.

rdougan
  • 7,217
  • 2
  • 34
  • 63
  • Sencha docs mention this ... "Please note that if you add more than one item into a container with a fit layout, only the first item will be visible." – Tony O'Hagan Nov 22 '12 at 04:02
  • The point is it will not work as expected -- the one visible item will expand to fit the space -- not the container expanding to fit all the child items. – btk Feb 19 '13 at 00:43
  • Correct, however in this case the container only has **one** child, a *list*, which we want to stretch to the size of the container. So **fit** is the appropriate layout. – rdougan Feb 19 '13 at 09:04