Làm cách nào để tôi căn chỉnh hai khu vực trong bố cục bảng ExtJS?

Question

Mã ExtJS dưới đây tạo ra hai vùng bên trái và bên phải của nhau, như thế này:

gì tôi phải thay đổi mã này vì vậy mà hai khu vực này được đầu thẳng hàng?

<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

Đối với tái sử dụng, tôi muốn nói thêm một phong cách lớp để tập tin CSS của bạn mà sẽ luôn top-align tế bào bố trí bảng.

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

này được ưa thích hơn một câu trả lời trước đó sử dụng .table-layout td như bộ chọn CSS, bởi vì nếu bạn có một bảng trong cách bố trí bảng này, chọn đó sẽ đầu sắp xếp TẤT CẢ các tế bào, không chỉ những người liên quan đến việc bố trí bảng .

Bạn sẽ thêm lớp này để Ext.Panel bạn như vậy:

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

Nếu bảng điều khiển của bạn đã có một thuộc tính cls, bạn có thể thêm các lớp học thêm với không gian:

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

Answer 3

Cả hai gợi ý câu trả lời có thể làm đi. Nhưng câu trả lời hay nhất (ít nhất là với Ext-JS 4), là sử dụng bố cục HBox và sử dụng cấu hình bố cục align: top.

Đến http://docs.sencha.com/ext-js/4-0/#!/example/layout/hbox.html và nhấn vào nút nói rằng: 'Align: top', hoặc 'Align: căng'

Answer 4

Trong ExtJS 4, bạn có thể sử dụng tdAttrs tùy chọn cấu hình:

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

Answer 5

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