2012-03-21 17 views
7

2 paneles:sencha táctil 2 lista 100% Altura

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

No hay atributo de altura especificado en el objeto de lista primeros paneles, por lo que no está disponible para su visualización. ¿Cómo puedo configurar el 100% de altura en xtype: 'list'?

Respuesta

13

Necesita dar a las listas contenedor un diseño para que sepa estirar sus hijos (la lista).

layout: 'fit' 

Usando ajuste le dirá a su panel para hacer que todos los niños (sólo la lista en su caso) para estirar al tamaño de su panel.

Example of this on Sencha Fiddle.

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

+0

eso es todo. gracias –

+0

Sencha menciona esto ... "Tenga en cuenta que si agrega más de un elemento en un contenedor con un diseño en forma, solo el primer elemento será visible". –

+0

¿Cuál es tu punto? –