ExtJSテーブルレイアウトの2つの領域を一番上に揃える方法を教えてください。

Question

以下ExtJSのコードは次のように、互いの左右に2つの領域を作成します。

を私は2つの領域がトップ整列するように、このコードを変更するには何がありますか？

<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

再利用のために、私はあなたのCSSファイルは常にトップ整列テーブルレイアウトセルにクラススタイルを追加します。

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

あなたはこのテーブルレイアウト内のテーブルを持っている場合、そのセレクタは、すべてのセルをトップ揃えしまうため、これは、テーブルのレイアウトに関連したものだけではなく、CSSのセレクタとして.table-layout tdを使用前の回答よりも優先されます。

あなたはそうのようなあなたのExt.Panelにこのクラスを追加します。

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

あなたのパネルがすでにcls属性を持っている場合は、スペースを追加クラスを追加することができます。

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

Answer 3

どちらの推奨的回答をしてもよいですそれをやる。しかし、最善の答え（少なくともExt JS 4で）は、HBoxレイアウトを使用し、align: top、レイアウト設定を使用することです。 http://docs.sencha.com/ext-js/4-0/#!/example/layout/hbox.htmlへ

行くと言うボタンをクリックしてください： '揃え：トップ'、または 'アライン：ストレッチ' ExtJSの4では

Answer 4

、あなたはtdAttrs設定オプションを使用することができます。

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

Answer 5

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