¿cómo hago una visualización de la lista Sencha Touch en un diseño de VBOX?

Tengo un panel principal con disposición establecida en vbox. Quiero agregar DOS listas separadas al panel. Quiero que las dos listas aparezcan apiladas verticalmente, y como desbordan la parte inferior del panel principal, el panel simplemente debería desplazarse.¿cómo hago una visualización de la lista Sencha Touch en un diseño de VBOX?

Sin embargo, parece que las listas deben establecerse en un diseño FIT, para mostrar. Los diseños ajustados no permiten el apilamiento vertical de los elementos.

¿Echo de menos una característica del sistema de diseño que me permite decir a la lista que se muestre por completo dentro de un elemento primario con un diseño de vbox?

Fuente

2012-04-30 Paul

Ext.List La superclase del componente es Ext.DataView y no Ext.Panel.

Por lo tanto, deberá agregar dos listas en dos paneles separados y agregar esos dos paneles dentro de un panel superior.
Además, tendrá que hacer el layout:'vbox' para la Superpanel y hacer layout:'fit' para los otros dos paneles secundarios

He aquí cómo usted puede hacerlo.

.... 
.... 
var superpanel = new Ext.Panel({ 
    fullscreen: true, 
    layout: 'vbox',    // to vertically stack two list. 
    items: [ 
     { 
      xtype: 'panel', 
      id: 'panel_1', 
      width: '100%', 
      layout: 'fit', 
      items: [ 
       { 
        xtype: 'list', 
        flex:1, 
        id: 'list1', 
        store: 'samplestore1' 
       } 
      ] 
     }, 
     { 
      xtype: 'panel', 
      id: 'panel_2', 
      width: '100%', 
      layout: 'fit', 
      items: [ 
       { 
        xtype: 'list', 
        id: 'list2', 
        flex:1, 
        store: 'samplestore2' 
       } 
      ] 
     } 
    ] 
}); 
.... 
....

Fuente

2012-04-30 05:25:49

no creo que necesita para anidar cada lista en un panel de envoltura. Muy felizmente puse listas desplegables como hijos de primera clase de contenedores vbox. Aunque si usa vbox, debe tener un valor para flex para cada niño, a menos que esté acoplado. – bradgonesurfing

¡Ahh! Eché de menos esa propiedad. Aplicar 'flex' ayudará a la lista a obtener el mismo espacio ... –

voy a verificar esto, pero creo que la solución flexible hace que cada lista ocupe exactamente la mitad de la altura de los padres. (dejando los elementos de la lista para desplazarse dentro de cada lista). me gustaría que cada lista no se desplace, y enumere todos sus elementos. Quiero que el panel principal se desplace ambas listas secundarias, como vbox children. (¿O lo hará su solución?) – Paul

var parent = new Ext.Panel({ 
    fullscreen: true, 
    layout: 'vbox', 
    items: [ 
     { 
      xtype: 'list', 
      id: 'list_1', 
      store: 'store1, 
      flex: 1 
     }, 
     { 
      xtype: 'list', 
      id: 'list_2', 
      store: 'store2, 
      flex: 1 
     } 
    ] 
});

Fuente

2012-04-30 10:40:28 thecodeparadox

altura put: 'auto' en el elemento de la lista

items: [ 
    { 
     xtype: 'list', 
     height: 'auto' 
    }, 
    { 
     xtype: 'list', 
     height: 'auto', 
    } 
]

Fuente

2012-09-17 21:51:15

¿cómo hago una visualización de la lista Sencha Touch en un diseño de VBOX?

Respuesta

Cuestiones relacionadas