¿Cómo alineo las dos áreas superiores en un diseño de tabla ExtJS?

Question

El código ExtJS siguientes crea dos regiones a la izquierda ya la derecha del uno al otro, así:

¿Qué tengo que cambiar a este código de manera que las dos zonas están alineados arriba?

<script type="text/javascript"> 

    var template_topbottom_top = new Ext.Panel({ 
     frame: false, 
     border: false, 
     header: false, 
     items: [] 
    }); 

    var template_topbottom_bottom = new Ext.Panel({ 
     frame: false, 
     border: false, 
     header: false, 
     items: [] 
    });  

    var template_topbottom = new Ext.Panel({ 
     id:'template_topbottom', 
     baseCls:'x-plain', 
     renderTo: Ext.getBody(), 
     layout:'table', 
     layoutConfig: {columns:2}, 
     defaults: { 
      frame:true, 
      style: 'margin: 10px 0 0 10px; vertical-align: top' //doesn't work 
     }, 
     items:[{ 
       width: 210, 
       height: 300, 
       frame: false, 
       border: true, 
       header: false, 
       items: [template_topbottom_top] 
      },{ 
       width: 1210, 
       height: 200, 
       frame: false, 
       border: true, 
       header: false, 
       items: [template_topbottom_bottom] 
      } 
     ] 
    }); 

    replaceComponentContent(targetRegion, template_topbottom, true); 

</script> 

Answer 1

<style> 
    .x-table-layout td { 
      vertical-align:top; 
    } 
</style> 

Answer 2

para su reutilización, me gustaría añadir un estilo de clase a su archivo CSS que siempre top-align celdas de disposición de mesa.

<style> 
    .x-table-layout-cell-top-align td.x-table-layout-cell { 
     vertical-align: top; 
    } 
</style> 

Esto es preferible a una respuesta anterior que utiliza .table-layout td como el selector CSS, porque si usted tiene una tabla dentro de esta disposición de la mesa, que el selector sería superior a alinear todas las células, no sólo los relacionados con el diseño de la mesa .

Se podría agregar esta clase a su Ext.Panel así:

new Ext.Panel({ 
    cls: 'x-table-layout-cell-top-align', 
    layout: 'table', 
    items: [ 
     ... 
    ] 
}) 

Si el panel ya tiene un atributo cls, puede agregar clases adicionales con espacios:

cls: 'my-container-cls x-table-layout-cell-top-align', 

Answer 3

Tanto sugerido respuestas pueden hazlo. Pero la mejor respuesta (al menos con Ext-JS 4) es usar un diseño HBox y usar align: top, configuración de diseño.

Ir a http://docs.sencha.com/ext-js/4-0/#!/example/layout/hbox.html y hacer clic en el botón que dice: 'Align: top', o 'Alinear: estiramiento'

Answer 4

En ExtJS 4, puede utilizar los tdAttrs opción de configuración:

layout: { 
    type: 'table', 
    columns: 2, 
    tdAttrs: { 
     valign: 'top' 
    } 
} 

Answer 5

  tdAttrs : { 
       style : { 
        verticalAlign : 'top' 
       } 
      }