sencha tocco 2 elenco altezza 100%

Question

2 pannelli:

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

v'è alcun attributo altezza specificata in oggetto lista primi pannelli, quindi non è disponibile per la visualizzazione. Come posso impostare il 100% di altezza in xtype: 'list'?

Answer 1

È necessario fornire gli elenchi container un layout in modo che sappia allungare i propri figli (l'elenco).

layout: 'fit' 

L'adattamento consente al pannello di rendere tutti i bambini (solo l'elenco nel tuo caso) in grado di adattarsi alle dimensioni del pannello.

Example of this on Sencha Fiddle.

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