Sencha touch 2 listing 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 } ] }); 

The object of the list of first panels does not have a height attribute, so it is not available for display. How can I set the height to 100% in xtype: 'list'?

Answer 1

You need to provide a list of the container so that it can stretch its children (list).

 layout: 'fit' 

Using fit, you tell your panel that all the children (only the list in your case) are stretched to the size of your panel.

An example of this is in Sencha Fiddle .

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